我们先去给任务视图里用到的模板添加一个用来编辑任务的文本框元素 ... 打开 index.html ... 找到定义 item-template 这个模板的地方 ...

在这组带 view 类的 div 标签的下面 ... 添加一个 text 类型的 input 元素 ... 在这个元素上面，可以加上一个 css 类 ... 叫它 edit ... 在应用的样式表里，已经为这个类设计好了一些样式 ..

然后再设置一下这个文本框的默认的值 ... 添加一个 value 属性 ... 它的值，就是任务的标题 ... 用一个 underscore 模板功能的特殊的标记 ... 再加上一个 title ，表示这里应该是任务的标题属性的值 ..

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

保存一下 ... 回到浏览器 ...

刷新一个应用的主页 ... 然后右键点击一个任务项目 ... 审查元素 ... 在这里，你会看到这个 input 元素 ... 在这个元素上面的 edit 这个类里面，已经定义好一些样式 ... 其中这里就有一个 display: none 的样式 .. 表示不显示这个元素 ...

在这个包装任务项目的 li 标签上，添加一个叫做 editing 类..

这样就会隐藏任务的标题，然后把那个编辑任务的文本框显示出来 ... 因为在应用的样式表里面，已经为这个 editing 类添加了合适的样式 ...

下面，我们可以到任务的视图上去监听一个双击事件 ... 发生这个事件以后，在包装任务项目的这个 li 标签上面，去添加一个做 editing 的 css 类 ...

视图

在 js 这个目录里面，打开 Views ... TodoView.js ...

在这个视图里的 events 属性里面，去监听一个双击事件 ... 这个事件是发生在 label 标签上的 ... 这个 label 标签就是包装任务标题用的那个标签 ...

发生这个事件以后，去执行 edit 这个方法 ...

'dblclick label' : 'edit'

在下面，我们再去定义这个 edit ...

edit: function() {}

这个方法做的事儿就是，在包装任务项目的元素上面，添加一个叫 editing 的 css 类 ...

this.$el .. 再用 jQuery 的 addClass 这个方法，可以给元素添加指定的 css 类 ... 要添加的类是 editing ...

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

这样，会把修改任务用的那个文本框显示出来 ... 下面，我们可以让这个文本框处于一个焦点的状态 ... 找到带 .edit 类的元素，也就是那个文本框元素 ... 再用一个 jQuery 的 focus 方法 ...

this.$('.edit').focus();

测试

保存 ... 再回到浏览器 ... 先刷新一下 ...

然后，双击任务的标题 ... 这样会触发 dblclick 事件 ... 我们监听了这个事件 ... 在它发生的时候，要做的事就是在任务项目的元素上面去添加一个 editing 的 css 类 ... 这样就会把在 label 标签里面的任务标题隐藏起来 ... 把编辑任务的文本框显示在这里 ...

不过，现在它还不能保存对任务标题的修改 ... 在下面的视频里，我们再去看一下 ...