切换显示和编辑状态 编辑页面

英文原文：http://emberjs.com/guides/getting-started/toggle-todo-editing-state/

TodoMVC支持用户通过双击每个待办事项来显示一个<input>文本编辑框，这样用户可以通过它修改待办事项的标题。每个待办事项的<li>元素通过editing这个CSS类来获得样式及位置信息。

接下来我们将更新我们的应用，使其支持用户切换到待办事项的编辑状态。我们在index.html中更新Handlebars的{{each}}助手的内容为：

1
2
3
4
5
6
7
8
9
10
11
12

 {{! ... 为保持代码简洁，在此省略了其他代码 ... }}
{{#each todo in model itemController="todo"}}
  <li {{bind-attr class="todo.isCompleted:completed todo.isEditing:editing"}}>
    {{#if todo.isEditing}}
      <input class="edit">
    {{else}}
      {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
      <label {{action "editTodo" on="doubleClick"}}>{{todo.title}}</label><button class="destroy"></button>
    {{/if}}
  </li>
{{/each}}
 {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

上述代码为我们的应用增加了三个新的行为：

  • 当控制器的isEditing属性为真时，添加CSS类editing，为假时，则删除。
  • 在<label>上添加了一个{{action}}助手，当双击的时候将调用当前待办事项控制器的editTodo方法。
  • 最后，使用{{if}}助手来包裹我们的待办事项，这样当编辑的时候能显示一个文本编辑框<input>，当不在编辑状态时显示待办事项的标题。

下面我们在js/controllers/todo_controller.js中为模板行为实现对应的逻辑：

1
2
3
4
5
6
7
8
9
10

Todos.TodoController = Ember.ObjectController.extend({
  actions: {
    editTodo: function() {
      this.set('isEditing', true);
    }
  },

  isEditing: false,

// ... 为保持代码简洁，在此省略了其他代码 ...

上述代码我们将此类型的控制器的isEditing缺省值设置为false，当editTodo操作被调用时，将对应控制器的isEditing属性设置为true。这个过程将自动触发使用了isEditing的模板的部分，来更新其渲染的内容。

重新载入Web浏览器以确保没有任何错误发生。那么就可以通过双击一个待办事项来编辑它。

在线示例

Ember.js • TodoMVC

附加资源