切换所有任务的状态

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在创建新任务这个文本框的旁边,还有一个复选框 ... 它可以切换应用里面,所有的任务的状态 ... 勾选上,可以把它所有的任务标记为完成的状态 .... 再点一下,可以把所有的任务标记为未完成的状态 ...

我们可以先去监听这个复选框的点击事件 ... 然后根据复选框的 checked 这个属性的值,去设置每个任务项目的 completed 属性的值 ...

先回到应用的视图 ...

然后在 events 这个属性里面,去监听一下切换全部任务状态的那个复选框的点击事件 ... 监听事件类型是 click ... 发生这个事件的元素是 #togle-all 这个 id 的元素 ...

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

'click #toggle-all' : 'toggleAll'

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

toggleAll: function() {}

在这个方法里面,我们可以先得到那个切换全部状态的复选框的 checked 属性的值 ... 如果勾选了复选框,这个属性的值就是 ture ,没勾选的话,这个属性的值就是 false ,我们可根据它的值,去设置全部的任务的状态。

var completed = $('#toggle-all')[0].checked;

另起一行 ... 需要再想办法处理集合里的每一个项目 ... 我们可以使用 Underscore 的 each 这个方法 ...

app.todoList.each ... 给这个方法一个函数 ... 这个函数就是处理集合里面的每个项目用的 ... 给这个函数一个参数 ... 可以用 todo 表示集合里面的单个的项目 ...

在这个函数里面,调用任务模型的 save 方法 ... 去保存一下 ... 给这个方法一个对象 ... 要保存的就是任务模型的 completed 这个属性的值 ...

保存成的值,就是根据切换全部任务状态的复选框来决定的 ... 在上面,我们已经把这个复选框的 checked 属性的值,交给了一个变量,叫做 completed ...

toggleAll: function() {
var completed = $('#toggle-all')[0].checked;
app.todoList.each(function(todo) {
todo.save({
'completed' : completed
});
});
},

保存 .. 回到浏览器 ... 刷新 ... 点击一个切换全部状态的复选框 ...

勾选了这个复选框 ... 会把所有的任务的状态都标记成已完成的状态 ....

取消勾选它 ... 会把所有的任务的状态标记成未完成的任务 ...

1:52
0:00
6:36
3:22
3:42
0:00
2:29
4:08

切换所有任务的状态《 Backbone 应用实例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点