英文原文：http://emberjs.com/guides/getting-started/accepting-edits/

在上一步中我们修改了TodoMVC使其可以支持用户能够切换到一个文本输入框<input>来编辑一个待办事项的标题。接下来，我们将实现在<input>显示时立即当前焦点移至其上，开始接收用户的输入，并在用户按下<enter>键时或把焦点从编辑的<input>元素中移出时，将用户的修改持久化，并显示待办事项修改后的标题。

为了实现这一步，可以创建一个自定义的组件并且通过Handlebars来注册它，使得其在模板中可用。

首先我们需要创建一个新的文件js/views/edit_todo_view.js。你可以将该文件放置到任意你喜欢的地方（即使将所有代码放置在同一个文件中），不过本指南将假设你按照指定的方式创建和命名该文件。

在js/views/edit_todo_view.js中创建一个Ember.TextField的扩展并注册成为一个助手：

  1. Todos.EditTodoView = Ember.TextField.extend({
  2.   didInsertElement: function() {
  3.     this.$().focus();
  4.   }
  5. });
  7. Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);

在index.html中引入这个新文件：

  1. <!--- ... 为保持代码简洁，在此省略了其他代码 ... -->
  2.   <script src="js/controllers/todo_controller.js"></script>
  3.   <script src="js/views/edit_todo_view.js"></script>
  4. </body>
  5. <!--- ... 为保持代码简洁，在此省略了其他代码 ... -->

在index.html中，将静态的<input>元素替换为自定义的{{edit-todo}}组件，连接value和操作：

  1. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}
  2. {{#if todo.isEditing}}
  3.   {{edit-todo class="edit" value=todo.title focus-out="acceptChanges"
  4.                            insert-newline="acceptChanges"}}
  5. {{else}}
  6. {{! ... 为保持代码简洁，在此省略了其他代码 ... }}

点击<enter>键会触发TodoController实例的acceptChanges事件。焦点离开<input>时会出发focus-out事件，并调用视图的TodoController实例的acceptChanges方法。

此外，TodoController实例的title属性与<input>的value属性进行了绑定。控制器中并没有定义title属性，这样控制就保持默认的行为，将所有请求代理到其model之上。

增加一个CSS类edit。

在js/controllers/todo_controller.js中，添加在EditTodoView中调用的acceptChanges方法：

  1. // ... 为保持代码简洁，在此省略了其他代码 ...
  2. actions: {
  3.   editTodo: function() {
  4.     this.set('isEditing', true);
  5.   },
  6.   acceptChanges: function() {
  7.     this.set('isEditing', false);
  9.     if (Ember.isEmpty(this.get('model.title'))) {
  10.       this.send('removeTodo');
  11.     } else {
  12.       this.get('model').save();
  13.     }
  14.   },
  15.   removeTodo: function () {
  16.     var todo = this.get('model');
  17.     todo.deleteRecord();
  18.     todo.save();
  19.   }
  20. },
  21. // ... 为保持代码简洁，在此省略了其他代码 ...

这个方法将控制器的isEditing属性设置为假，并提交所有针对该待办事项的修改。

在线演示

Ember.js • TodoMVC

附加资源