JavaScript 应用开发 #5:为完成的任务添加样式
2014-07-11 14:37
225 查看
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式。比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线。这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面。下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去。
怎么样为模型添加合适的 css 类。
怎么样在任务模型的完成状态发生变化时,立即更新任务项目的显示。
得到模型的属性的值,用的就是模型的 get 方法。这里我们要得到的是模型的 completed 属性的值,如果它的值是 ture ,就在这个模型上面去添加一个 .completed 类,如果是 false ,如果在任务项目上有 .completed 类,就从任务项目上面去掉这个 .completed 的 css 类。
jQuery 的 toggleClass 方法,可以为元素添加或者删除掉指定的 css 类。这个方法支持一个开关的参数,这个开关如果返回的是 true ,就在指定的元素上面去添加指定的 css 类,如果开关返回的是 false,就从元素上面去掉指定的 css 类。
当模型的值发生变化的时候,会触发一个 change 事件,在模型的视图里面,我们可以去监听这个 change 事件,当模型的值发生变化以后,立即去执行模型视图的渲染方法,更新一下模型视图的显示。
this.$el,表示要使用其它的方法去处理当前视图的 el 属性里的东西,$el 就是 $(view.el) 的简写形式,后面我们用到了 toggleClass 这个方法,这是来自 jQuery 的一个方法。在这个方法里面,第一个参数就是要添加或删除的 css 类。第二个参数是一个开关,this.model.get ,使用与当前视图相关的模型的 get 方法去得到 completed 这个属性的值,这样,如果它返回 ture ,也就是如果任务是完成的状态,就去添加一个 .completed 这个类,如果返回的是 flase ,就从任务项目上面去掉这个 .completed 类。
JavaScript 应用开发 #5:为完成的任务添加样式由源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/js/9783.html
要解决的问题
怎么样得到模型的属性的值。怎么样为模型添加合适的 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
相关文章推荐
- JavaScript 应用开发 #4:切换任务的完成状态
- Web开发常用小技巧 -- JavaScript[不断添加中...]
- [ajax开发工具]使用JSLint完成JavaScript语法检查
- JavaScript在.Net web开发中的应用
- Javascript在应用开发中越来越重要
- 再谈javascript 动态添加样式规则 W3C校检
- Eclipse下开发QT4应用,看不见添加的控件的问题及其解决方法
- 软件开发——不可能完成的任务?(收藏)
- [翻译-ASP.NET MVC]Contact Manager开发之旅之迭代2 - 修改样式,美化应用
- 用 Dojo 的 Ajax 应用开发进阶教程,第 1 部分:JavaScript 技巧与高级特性
- 再谈javascript 动态添加样式规则 W3C校检
- [ajax开发工具]使用JSLint完成JavaScript语法检查
- 完成端口开发之QA(常见问题,持续添加)
- asp.net控件开发基础(12) --------为子控件添加样式
- SharePoint工作流开发点滴(7) - 用代码完成任务
- 插件式程序开发及其应用(C#) - 2(完成)
- Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题
- 开发自动完成功能中遇到的几个问题---javascript+XMLHTTP+DOM
- Javascript 检测、添加、移除样式(className)函数代码
- Dojo 的 Ajax 应用开发进阶教程:JavaScript 技巧与高级特性(一)