Question

当我点击提交或带有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");
  }
});

但我看不到任何警告信息。我想看看这两个消息。

Answer 1

短

使用更多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的模板，则ember会自动为您创建LoginController和App.LoginView = Ember.View.extend();。只有当你需要在控制器或视图中放置逻辑时，你应该自己创建一个，所以ember将使用它而不是创建一个。所以，既然你不应该在你的视图中放置逻辑而不是一些渲染相关的东西，在你的情况下它也可以完全省略，ember将为你实例化一个基本视图。如果您想使用自己的视图，那么应该如何定义它：

myAwesomePanel

这里要考虑的唯一重要事项是，如果您希望视图自动与特定模板一起使用，那么传统命名就是一切。例如，如果您有一个名为MyAwesomePanelView的模板，则ember.js需要App名称空间下名为App.MyAwesomePanelView的视图。 ember.js将对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')); } }); ember的调用也会自动为您实例化。

{{1}}

希望这有帮助。

使用emberjs在视图中使用动作

1 个答案: