Question

英文原文：http://emberjs.com/guides/getting-started/marking-a-model-as-complete-incomplete/

接下来我们将更新我们的应用，允许用户将一个待办事项标记为完成或者为完成，并将更新信息持久化。

在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属性。

在线示例

Ember.js • TodoMVC

附加资源

• 用diff格式呈现本次修改
• Ember.Checkbox API文档
• 控制器指南
• 计算属性指南
• 命名惯例指南