入门指南 - 切换显示和编辑状态
优质
小牛编辑
134浏览
2023-12-01
英文原文：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浏览器以确保没有任何错误发生。那么就可以通过双击一个待办事项来编辑它。