下面，我们先到任务的模型里面，去添加一个方法，用这个方法，可以修改任务的 completed 属性的值。

模型

在 js 目录，下面的 Models 这个目录里面，找到 Todo.js ... 这是我们为任务数据创建的模型。

在这里，添加一个方法 ... 可以叫做 toggle ...

toggle: function() {}

在这个方法里面，我们可以使用模型的 save 方法，去保存模型的属性的值 ... 先用一个 this.save ... 表示使用当前这个模型的 save 方法 .. 给这个方法传递一个对象 ... 然后添加一个 completed 属性 ... 它就是用来表示任务状态的那个属性 ...

然后要保存的跟这个属性对应的值 ... 应该是跟任务当前的这个属性的值相反的值 ... 也就是，如果任务当前这个属性的值是 false ，那么这里要设置的值就是 true .. 如果原来的任务的这个属性的值是 true 的值 ... 这里要保存的值就是 false ...

用一个 this.get ... 使用模型的 get 这个方法 ... 可以得到指定的属性的值 ... 要得到值的属性就是 completed ...

然后在它前面，可以加上一个 ! 号，表示跟得到的值相反的值 ...

toggle: function() {
this.save({
completed: !this.get('completed')
});
}

事件

下面，我们再去监听一下切换状态的那个复选框的点击的事件 ... 监听这个事件，可以在模型的视图里面去做 ... 因为这个复选框元素属于这个模型视图的一部分 ...

在 js 这个目录里面，找到 Views ... 然后打开这个目录里面的 TodoView.js ... 在视图里监听 DOM 上的事件 ... 可以添加一个 events 属性 ...

events: {}

然后，在这个对象里面，添加想要监听的事件 ... 这里我们要监听的是发生在复选框元素上的点击事件 ... 所以，事件的类型是 click ... 再输入一个空格 .. 然后是发生这个事件的元素 ... 在复选框上面，有一个叫 toggle 的 css 类，可以用这个类，来定位这个元素 ..

再指定一下，处理这个事件要用到的函数 ... 这里设置成 toggleCompleted ...

// 监听 DOM 事件
events: {
'click .toggle' : 'toggleCompleted'
},

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

它做的事很简单，就是去执行一下与视图相关的这个模型里面的 toggle 方法 ... 这个方法就是刚才我们在模型里面定义的，用来修改 completed 属性的值的那个方法 ...

// 切换任务状态
toggleCompleted: function() {
this.model.toggle();
},

保存 ... 下面到浏览器上试试 ...

测试

先打开 Chrome 的开发者工具 ... Resource 选项卡 ... Local Storage ... 找到一个任务 ... 比如 .... 这里你会看到，它的 completed 属性的值是 false ...

下面我们点击一下这个 对号 ... 再刷新一下 Local Storage ... 你会发现 ... 这条任务的 completed 属性的值，就变成了 true ...

再点一下这个对号 ... 刷新 Local Storage ... 它的 completed 属性的值，又会变成原来的 false ...