判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式。比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线。这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面。下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去。
要解决的问题
- 怎么样得到模型的属性的值。
- 怎么样为模型添加合适的 css 类。
- 怎么样在任务模型的完成状态发生变化时,立即更新任务项目的显示。
得到模型的属性的值,用的就是模型的 get 方法。这里我们要得到的是模型的 completed 属性的值,如果它的值是 ture ,就在这个模型上面去添加一个 .completed 类,如果是 false ,如果在任务项目上有 .completed 类,就从任务项目上面去掉这个 .completed 的 css 类。
jQuery 的 toggleClass 方法,可以为元素添加或者删除掉指定的 css 类。这个方法支持一个开关的参数,这个开关如果返回的是 true ,就在指定的元素上面去添加指定的 css 类,如果开关返回的是 false,就从元素上面去掉指定的 css 类。
当模型的值发生变化的时候,会触发一个 change 事件,在模型的视图里面,我们可以去监听这个 change 事件,当模型的值发生变化以后,立即去执行模型视图的渲染方法,更新一下模型视图的显示。
模型的视图
理解了上面这些东西以后,打开模型的视图,js/Views/TodoView.js ,在这个视图的 render 方法里,添加下面这行代码:
this.$el.toggleClass('completed', this.model.get('completed'));
this.$el,表示要使用其它的方法去处理当前视图的 el 属性里的东西,$el 就是 $(view.el) 的简写形式,后面我们用到了 toggleClass 这个方法,这是来自 jQuery 的一个方法。在这个方法里面,第一个参数就是要添加或删除的 css 类。第二个参数是一个开关,this.model.get ,使用与当前视图相关的模型的 get 方法去得到 completed 这个属性的值,这样,如果它返回 ture ,也就是如果任务是完成的状态,就去添加一个 .completed 这个类,如果返回的是 flase ,就从任务项目上面去掉这个 .completed 类。
发生变化时立即反应
勾选切换任务状态的对号,会改变任务模型的值,这时在模型上就会触发一个 change 事件,在模型的视图里面,我们可以去监听这个事件,发生这个事件以后,再去执行一下模型的 render 方法,更新一下任务项目的显示。在模型视图里面,去添加一个 initialize 方法,在它里面,可以使用视图的 listenTo 去监听事件:
// 初始化 initialize: function() { this.listenTo(this.model, 'change', this.render); },
练习
现在,可以到浏览器去试试了,用 Chrome 浏览器打开应用的主页 index.html 。然后点击任务项目左边的对号,切换一下任务项目的完成状态,你应该会立即看到显示的变化。
JavaScript Backbone