JavaScript 应用开发 #6：编辑任务

双击任务的标题，会显示一个用来编辑这个任务的文本框，在这个文本框里面，已经填写好了当前任务的标题的内容，用户可以编辑任务的标题，完成以后，按下回车键，或者点一下其它的地方，可以保存对任务标题的修改。实现这个编辑任务的功能，可以这样：

1. 在任务模型的模板里面添加一个包含任务标题的文本框，默认把它隐藏起来。
2. 双击任务标题后，隐藏任务标题，再把用来编辑任务的文本框显示出来。
3. 按下回车键或点击其它的地方，都会触发相应的事件，去监听这些事件。
4. 得到在编辑任务的文本框里面的内容，并且把它保存起来。

修改模型的模板

打开应用的主页 index.html，找到定义任务模型模板的地方（#item-template），的模型的模板里面，添加这行代码：

<input class="edit" value="<%= title %>">

这是一个用来编辑任务标题的文本框，在它上面有一个 .edit 类，默认这个文本框会被隐藏起来，已经在应用的样式表里设计好了样式。在这里 value 属性的值用了一组 Underscore 模板的特殊标记，要输出的东西是 title ，也就是任务的标题，这个 title 会在模型的视图里面传递进来。现在，模型的模板看起来是这样的：

<!-- 任务模型的模板 -->
<script type="text/template" id="item-template">
    <div class="view">
        <input type="checkbox" class="toggle" <%= completed ? 'checked' : '' %>>
        <label><%= title %></label>
    </div>
    <input class="edit" value="<%= title %>">
</script>

监听任务标题上的双击事件

双击任务的标题，会把任务的标题隐藏起来，然后把用来编辑任务标题的文本框显示出来。在模型视图的包装元素上面，可以添加一个叫 .editing 的 css 类，在它里面定义的样式，可以隐藏任务标题，并且显示编辑任务的文本框。这个双击的事件可以在模型的视图里面去监听，打开 js/Views/TodoView.js，然后在这个视图的 events 属性里面，添加要监听的 DOM 事件：

'dblclick label'  : 'edit',

上面这行代码会监听发生在 label 元素上面的 dblclick （鼠标双击）事件，label 就是用来包装任务标题用的元素。发生这个事件的时候，去执行 edit 这个方法。下面， 要在这个视图里去定义这个 edit 方法：

// 双击任务标题做的事
edit: function() {
    this.$el.addClass('editing');
    this.$('.edit').focus();
},

在这个方法里用到了 jQuery 的 addClass 这个方法，可以为指定的元素添加指定的 css 类，在这里，指定的元素就是视图的 el 元素，要添加的 css 类就是 .editing。 接着，又去找到了视图 el 元素下面的 .edit 这个元素，然后调用 focus 方法，让这个元素进入焦点状态。

练习

保存文件，然后用 Chrome 浏览器打开应用的主页， 刷新一下，打开浏览器的开发者工具，然后双击任务的标题，这样会把编辑任务的文本框显示出来，观察包装任务项目用的 li 元素上面的 css 类的变化，你会发现，多了一个 .editing 的 css 类，再看一下，在这个类上面定义的样式。

回车或离开文本框时保存对任务的修改

下面， 我们需要再去监听发生在 .edit ，也就是编辑任务用的文本框这个元素上的两个事件，keypress 还有 blur ，在这个元素上按下按键会触发 keypress 事件，离开这个元素的时候，会触发 blur 事件。利用这两个事件的处理方法，可以去保存对任务标题的修改。同样是在模型的视图里的 events 属性里面去监听这两个事件：

'keypress .edit'  : 'updateOnEnter',
'blur .edit'      : 'close',

这两件事件都是发生在 .edit 这个元素上的，发生 keypress 事件的时候，去执行 updateOnEnter 这个方法，发生 blur 事件的时候，去执行 close 这个方法。下面，先去定义一下 updateOnEnter 这个方法：

//  编辑任务完成以后按回车键
updateOnEnter: function(event) {
    if (event.which === 13) {
        this.close();
    }
},

在这个方法里，判断了用户按的是否是回车键，回车键的代码是数字 13，如果是，就去执行这个视图里面的 close 这个方法。下面，再去定义这个方法：

// 保存对任务的修改
close: function() {
    var newTitle = this.$('.edit').val().trim();
    this.model.save({title: newTitle});    
    this.$el.removeClass('editing');
},

close 这个方法现在做的是，得到在编辑任务的文本框里面的任务的标题，然后调用当前这个模型的 save 方法，把修改后的任务标题保存起来，接着再调用 removeClass 方法，把 .editing 这个 css 类从模型视图的 el 元素上面去掉。

练习

再到浏览器上测试一下，刷新页面，然后双击任务的标题，修改标题的内容，按一下回车键，这样应该会保存对任务标题的修改，再次双击这个任务标题，修改标题的内容，然后用鼠标点一下其它的地方，或者离开这个浏览器窗口，再回来看一下，应该也会保存对标题的修改。