JavaScript 应用开发 #5：为完成的任务添加样式

判断一下任务的状态，如果是完成的任务，可以在任务项目的上面，添加一个额外的 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 应用开发 #5：为完成的任务添加样式由源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/js/9783.html