Question

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

附加资源

• 用diff格式呈现本次修改
• Handlebars条件表达式指南
• bind-attr API文档
• action API文档
• Peter Wagenet编写的bind和bindAttr文章