在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中查看使用操作

回答

相关问题