在前面的视频里，我们介绍过，按下按键的事件，还有怎么样去判断用户是否按的是回车键的方法 ... 在编辑任务的功能里面，同样需要用到这个类似的方法去处理一下 ...

先打开模型的视图 ... 因为这个事件是发生在模型的视图元素里面的 ...

在 TodoView.js 这里面， 找到 events 这个属性 .... 在这个属性里，可以继续去添加监听的其它的 DOM 事件。

按下按键的事件叫做 keypress ... 这个事件是发生在 .edit 这个类所在的元素上的 ... 发生这个事件的时候，去执行一下 updateOnEnter ..

'keypress .edit' : 'updateOnEnter',

在下面，再去定义一下这个方法 ...

updateOnEnter: function() {}

在这个方法里面，可以接受一个事件对象的参数 ... 这里用 event 表示 ... 然后在这个方法里面，去判断一个用户按的是不是回车键 ..

if (event.which === 13) {}

按下的按键是在事件对象的 which 属性里面，回车键的代号是数字 13 ...

如果是的话，就去执行一下另一个方法 ... 这里就是这个视图里面的 close 这个方法 ...

this.close();

在它上面，再去定义一下这个 close 方法..

close: function() {}

在这个方法里面，先去得到编辑任务的文本框里面的值 ... 先给这个值起个名字 ... 可以叫它 newTitle ... 然后找到这个视图元素里面的 .edit 这个类的元素 ... 再用 val 这个方法得到元素里面的值 ... 再调用一下 trim 这个方法，去清理一下空格 ...

var newTitle = this.$('.edit').val().trim();

然后用视图相关的模型的 save 方法 ... 去保存一下 ...

this.model.save({title: newTitle});

完成修改以后，需要把文本框上面的 editing 这个类去掉 ... 这样就又会显示出任务的标题 ... 这里我们用的是 jQuery 的 removeClass ，去移除掉元素上的指定的 css 类 ...

this.$el.removeClass('editing');

blur

最后，我们需要再去监听一下编辑任务的文本框元素的 blur 事件 ... 当元素处在焦点状态的时候，离开这个元素以后，就会触发一个 blur 事件 ...

在 events 这个属性里面 ... 另起一行 ... 要监听的 DOM 事件的类型是 blur ... 这个事件是发生在 .edit 这个类的元素上面 ...

发生这个事件以后，去执行一下 close 这个方法 ...

'blur .edit' : 'close',

测试

下面，我们到浏览器上试试 ... 先保存一下 ... 回到浏览器 ... 刷新 ..

双击要编辑的任务项目 ... 修改任务的标题 ... 然后按一下回车 ...

这样会保存所做的修改 ...

再试一下 ... 双击任务项目 ... 修改标题 ...

然后随便点一下其它的地方 .. 这样离开了文本框以后，会触发 blur 事件 ... 同样会保存对任务的修改 ...