1

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

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

4

1 回答 1

2

短的

您尝试做的事情应该使用更多的ember.js命名约定来做一些不同的事情。有关工作示例，请参见此处。

长的

您的模板，请注意我已更改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>

一般来说，如果你有一个名为loginember 的模板，它会自动为你创建一个LoginView和一个LoginController。仅当您需要将逻辑放入控制器或视图中时，您才应该自己创建一个，因此 ember 将使用它而不是创建一个。因此，由于除了一些与渲染相关的内容之外，您不应该将逻辑放在视图中，在您的情况下也可以完全省略它，ember 将为您实例化一个基本视图。如果您想使用自己的视图而不是这样定义它：

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

这里唯一要考虑的重要事情是，如果您希望视图自动与特定模板一起使用，那么传统命名就是一切。例如，如果您有一个名为myAwesomePanelember.js的模板，则需要MyAwesomePanelView在命名空间下调用一个视图App。ember.js 将进行查找App.MyAwesomePanelView，如果找到与模板名称对应的模板名称，它将使用它并自动实例化它，因此调用extend而不是create. 基本上约定如下：App.<YourCamelCasedTemplateName>View

您的控制器，这次我们创建一个，因为我们确实需要一些逻辑。请注意，调用extend而不是createember 也会自动为您实例化它。

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

希望这可以帮助。

于 2013-07-10T10:02:54.583 回答