Javascript 将视图中的操作与emberjs一起使用

我将在单击submit或emberjs按钮时使用action。

这是一个模板

<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>

这是controller.js

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

---

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

短消息

使用更多的

ember.js

命名约定，您试图做的事情应该有所不同。有关工作示例，请参见

长的

您的模板，请注意，我已将

App.Views.TextField

更改为简单的

输入

，它基本上是一个文本字段，

Ember.TextField

。我还添加了

type=“password”

，使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>

这里需要考虑的唯一重要的一点是，如果您希望视图自动与特定模板一起使用，那么传统的命名就是一切。例如，如果您有一个名为

myAwesomePanel

ember.js的模板，则在

App

命名空间下需要一个名为

MyAwesomePanelView

的视图。ember.js将查找

App.MyAwesomePanelView

，如果找到与模板名称对应的模板名称，它将使用它并自动实例化它，从而调用

extend

，而不是

create

。基本上惯例如下：

App.View

您的控制器，这次我们创建了一个控制器，因为我们确实需要一些逻辑。请注意，调用

extend

而不是

create

ember也会自动为您实例化它

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

希望这有帮助

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

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