在完成的任务项目上面，会有一点额外的样式，比如把文字的颜色变成浅灰色，文字上面还有一条删除线 ... 这些样式，已经在应用的样式表里面定义好了 ... 放在了 completed 这个类里 ...

右键点击任务项目，审查元素 ... 然后在任务项目的 li 标签里面，添加一个 completed 类 ... 你会看到有一些样式，添加到了这个任务项目上面 ...

下面，我们可以想办法，把这个类，添加到是完成状态的任务项目上面 ...

在模型的视图的 render 这个方法里面，我们可以使用 jQuery 的 toggleClass 这个方法，去给完成状态的任务添加 completed 这个 css 类。

打开 js ，Views ，TodoView.js

在 render 这个方法里面 ... 输入 this.$el ... 这个 $el 是用 jQuery 包装的这个视图的 el 属性的一个简单的写法 ... 这样我们就可以使用其它的方法去处理视图的 el 属性 。

这里我们可以使用 jQuery 的 toggleClass ... 这个方法，可以添加或者删除掉指定元素里面的 css 类 ... 在这里，就是 completed 这个类 ...

toggleClass 这个方法还支持一个开关的参数 ... 这个开关决定了是要添加这个 css 类，还是删除掉这个 css 类 ... 如果这个开关返回的值是 true ，就去添加前面这里指定的这个 css 类，如果切换器返回的是 false ，就从元素里面，移除掉这个 css 类。

在这里，我们可以用任务的 completed 这个属性的值作为这个方法的开关 .. 得到视图对应的模型的属性的值，可以这样 ...

this.model.get('completed')

这样，如果模型的 completed 属性的值是 true 的话 .. 就会在这个模型视图的 el 元素上面添加一个叫 completed 的 css 类 ... 如果 completed 属性的值是 false ，就会去掉 completed 这个 css 类。

测试

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

先刷新一下 ... 然后找一下任务项目 ... 点击这个对号 ... 这样会把这个任务的 completed 属性的值设置成 true .. 然后刷新一下 ... . 你会看到，在这个任务项目的上面，会使用一点额外的状态 ... 这就表示在它上面已经添加了 completed 这个 css 类 ...

不过我们想要的是，点击这个切换状态的复选框以后，立即看到效果 ... 在下面的视频里，我们再去看一下解决的办法。