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


英文原文: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。当被调用时因为用户触发了模板中的复选框而带有一个参数,那么这个属性将设置modelisCompleted属性为传入的参数值(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

附加资源