点击这个对号以后，让任务的显示立即做出反应 .... 解决这个问题的办法就是，在这个任务视图上面，去监听一下模型的 change 事件 ... 因为点击这个切换状态的复选框以后，会改变模型的属性的值 ... 这样就会触发 change 事件 ...

当发生这个事件的时候，可以再去执行一下视图的 render 方法，重新渲染一下 ... 这样就会在任务项目上面立即添加或者移除掉 completed 这个 css 类。

视图

再回到 TodoView 这个视图 ... 然后在这里面，去添加一个初始化的方法 .. 也就是 initialize 这个方法 ...

initialize: function() {}

然后在这个方法里面，去监听一下模型的 change 事件 ... 可以使用视图的 listenTo 这个方法去监听模型的 change 事件 ... 先设置一下发生事件的对象 ... 这里就是 this.model ，表示当前这个视图对应的模型 ... 第二个参数是要监听的事件的类型，这里是 ... change ... 然后，第三个参数是发生这个事件以后要做的事情。

这里，我们用一个 this.render ，表示使用当前这个模型的 render 这个方法 ...

现在，当点击切换状态的复选框的时候，改变了 completed 属性的值，发生了 change 事件，就会重新去渲染一下显示 ... 然后为发生变化的任务项目添加或者删除掉 completed 这个 css 类。

测试

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

然后点击任务项目左边的切换状态的这个对号 ... 任务项目的显示，会立即做出反应 ...

// 初始化
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},