发布于 2015-08-18 16:33:58 | 396 次阅读 | 评论: 0 | 来源: 网络整理
接下来我们将更新我们的应用，允许用户将一个待办事项标记为完成或者为完成，并将更新信息持久化。
在index.html中更新模板，通过添加一个itemController参数在Handlebars的{{each}}助手中，将每个待办事项包裹在其自己的控制器中。接着将静态的<input type="checkbox">转换为一个{{input}}助手：
1 2 3 4 5 6 7 8 |
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
{{#each todo in model itemController="todo"}}
<li {{bind-attr class="todo.isCompleted:completed"}}>
{{input type="checkbox" checked=todo.isCompleted class="toggle"}}
<label>{{todo.title}}</label><button class="destroy"></button>
</li>
{{/each}}
{{! ... 为保持代码简洁，在此省略了其他代码 ... }}
|
当{{input}}被渲染时，将询问控制器属性isCompleted属性的当前值是什么。当有用户点击了这个输入时，将调用控制器的isCompleted属性，参数是真或假依赖于输入的选中属性的值。
在应用中，实现一个通过匹配用作itemController值的名称的类Todos.TodoController，来为每个待办事项实现一个控制器。为这段代码创建一个新文件js/controllers/todo_controller.js。你可以将该文件放置到任意你喜欢的地方（即使将所有代码放置在同一个文件中），不过本指南将假设你按照指定的方式创建和命名该文件。
在js/controllers/todo_controller.js中为Todos.TodoController和其isCompleted属性添加代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Todos.TodoController = Ember.ObjectController.extend({
isCompleted: function(key, value){
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
return model.get('isCompleted');
} else {
// property being used as a setter
model.set('isCompleted', value);
model.save();
return value;
}
}.property('model.isCompleted')
});
|
当模板中需要显示待办事项的当前isCompleted状态，这个属性将这个问题委派给其底层的model。当被调用时因为用户触发了模板中的复选框而带有一个参数，那么这个属性将设置model的isCompleted属性为传入的参数值（true或者false），并将模型的变更持久化，返回传入的值以便复选框显示正确。
isCompleted函数被声明为一个计算属性，其值依赖于model.isCompleted。
在index.html中包含js/controllers/todo_controller.js依赖：
1 2 3 4 5 6 |
<!--- ... 为保持代码简洁，在此省略了其他代码 ... --> <script src="js/models/todo.js"></script> <script src="js/controllers/todos_controller.js"></script> <script src="js/controllers/todo_controller.js"></script> </body> <!--- ... 为保持代码简洁，在此省略了其他代码 ... --> |
重新载入Web浏览器以确保所有被引用的文件正确无误且没有任何错误发生。现在可以改变一个待办事项的isCompleted属性。