发布于 2015-08-18 16:30:22 | 652 次阅读 | 评论: 0 | 来源: 网络整理
接下来，我们将更新我们的静态HTML<input>为一个Ember视图，以便能够提供更多复杂一些的行为。我们将index.html中的新建待办事项的<input>替换为一个{{input}}助手：
1 2 3 4 5 6 7 8 9 |
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
<h1>todos</h1>
{{input
type="text"
id="new-todo"
placeholder="What needs to be done?"
value=newTitle
action="createTodo"}}
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
|
上述模板将在这渲染一个具有相同id和placeholder属性的<input>元素。并且将这个模板对应的控制器的newTitle属性与<input>的value属性相连。当一个发生改变时，另外一个将自动保持同步。
另外，我们还将使用模板控制器的createTodo方法来处理用户交互（按下<enter>键）。
因此目前我们并不需要自定义控制器行为，Ember.js为模板提供了一个缺省的控制器。为了处理新的行为，我们可以实现一个Ember可以根据命名惯例找到，并能添加自定义行为的控制器。这个新控制器类将自动的关联到该模板。
添加一个js/controllers/todos_controller.js文件。你可以将该文件放置到任意你喜欢的地方（即使将所有代码放置在同一个文件中），不过本指南将假设你按照指定的方式创建和命名该文件。
在js/controllers/todos_controller.js中实现了Ember.js根据命名惯例可以找到的控制器：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Todos.TodosController = Ember.ArrayController.extend({
actions: {
createTodo: function() {
// Get the todo title set by the "New Todo" text field
var title = this.get('newTitle');
if (!title.trim()) { return; }
// Create the new Todo model
var todo = this.store.createRecord('todo', {
title: title,
isCompleted: false
});
// Clear the "New Todo" text field
this.set('newTitle', '');
// Save the new model
todo.save();
}
}
});
|
上述控制器现在负责使用newTitle属性作为一个isCompleted属性为假的新待办事项的标题的用户操作。接着将清除这个将用于同步模板和重置文本框的newTitle属性。最后将待办事项所有未保存的修改持久化。
在index.html中包含js/controllers/todos_controller.js依赖：
1 2 3 4 5 |
<!--- ... 为保持代码简洁，在此省略了其他代码 ... --> <script src="js/models/todo.js"></script> <script src="js/controllers/todos_controller.js"></script> </body> <!--- ... 为保持代码简洁，在此省略了其他代码 ... --> |
重新载入Web浏览器以确保所有被引用的文件正确无误且没有任何错误发生。现在可以通过在<input>中输入一个标题，然后点击<enter>键来添加其他的待办事项。