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

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

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

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

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

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

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

  1. Todos.TodoController = Ember.ObjectController.extend({
  2.   actions: {
  3.     editTodo: function() {
  4.       this.set('isEditing', true);
  5.     }
  6.   },
  8.   isEditing: false,
  10. // ... 为保持代码简洁，在此省略了其他代码 ...

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

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

在线示例

Ember.js • TodoMVC

附加资源