在emberjs中查看使用操作

我使用emberjs提交或按鈕時使用操作。
在emberjs中查看使用操作

這是模板

<script type="text/x-handlebars" id="login"> 
    <form class="form-horizontal" id="loginForm" > 
    {{view App.Views.TextField id="username"}} 
    {{view App.Views.TextField id="password"}} 
    <input type="submit" value="Login" {{action login this}} /> 
    </form> 
</script>

這是view.js

App.Views.login = Ember.View.create({ 
    templateName: 'login', 
    controllerBinding: 'App.Controllers.login', 
    username: '', 
    password: '', 
    login: function(){ 
    alert("this is view.js"); 
    } 
});

這是controller.js

App.Controllers.login = Ember.Object.create({ 
    login: function(event){ 
    alert("This is controller.js"); 
    } 
});

但我不能看到任何警告信息。我想看到這兩條消息。

來源

2013-07-10 Sea guy

短

你所要做的應該使用更多ember.js命名約定來完成有些不同。有關工作示例，請參閱here。

長

你的模板，聲明，我已經改變了App.Views.TextField簡單地input這基本上是一個文本框，Ember.TextField。我還添加了type="password"以使密碼字段像一個行爲一樣。 valueBinding語句可確保在更改任何值時，控制器上的相同命名屬性也會因數據綁定而發生更改。

<script type="text/x-handlebars" id="login"> 
    <form class="form-horizontal" id="loginForm" > 
    {{input id="username" valueBinding="username"}} 
    {{input type="password" id="password" valueBinding="password"}} 
    <button class="btn btn-success" {{action login}}>Login</button> 
    </form> 
</script>

一般來說，如果你有一個名爲login餘燼模板將自動爲您創建一個LoginView和LoginController。只有當你需要在你的控制器或視圖中放置邏輯時，你應該自己創建一個邏輯，所以燼將使用它而不是創建一個。所以，由於除了一些渲染相關的東西外，你不應該在視圖中放置邏輯，在你的情況下它也可以被完全忽略，所以，燼將爲你實例化一個基本視圖。在你想用你自己的觀點不是這樣的話是應該如何來定義：

App.LoginView = Ember.View.extend();

考慮到這裏的唯一重要的事情是，如果你想有一個觀點被自動與特定的使用模板比傳統的命名更是一切。例如，如果您有一個名爲myAwesomePanel的模板，ember.js會在App名稱空間下預期一個名爲MyAwesomePanelView的視圖。 ember.js會查找App.MyAwesomePanelView，如果它找到一個對應於模板名稱的名稱，它將使用它並自動實例化，因此調用extend而不是create。基本上約定如下：App.<YourCamelCasedTemplateName>View

您的控制器，這次我們創建一個，因爲我們這裏確實需要一些邏輯。注意extend而不是create的調用，它也會自動爲你實例化它。

App.LoginController = Ember.ObjectController.extend({ 
    username: '', 
    password: '', 
    login: function(){ 
    alert("User: "+this.get('username')+" Pass: "+this.get('password')); 
    } 
});

希望這會有所幫助。

來源

2013-07-10 10:02:54 intuitivepixel

在emberjs中查看使用操作

回答

相關問題