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