标记模型为完成或未完成 编辑页面

英文原文：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

附加资源