接受修改 编辑页面

英文原文：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
2
3
4
5
6
7

Todos.EditTodoView = Ember.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Ember.Handlebars.helper('edit-todo', Todos.EditTodoView);

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

1
2
3
4
5

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

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

1
2
3
4
5
6

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

点击<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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// ... 为保持代码简洁，在此省略了其他代码 ...
actions: {
  editTodo: function() {
    this.set('isEditing', true);
  },
  acceptChanges: function() {
    this.set('isEditing', false);

    if (Ember.isEmpty(this.get('model.title'))) {
      this.send('removeTodo');
    } else {
      this.get('model').save();
    }
  },
  removeTodo: function () {
    var todo = this.get('model');
    todo.deleteRecord();
    todo.save();
  }
},
// ... 为保持代码简洁，在此省略了其他代码 ...

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

在线演示

Ember.js • TodoMVC

附加资源