JavaScript 应用开发 #4:切换任务的完成状态
在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成。所以, 我们需要一个可以切换任务完成状态的方法。在任务模型里面,表示任务状态的属性是 completed,它的值是 true 表示任务是完成的,如果是 false 就表示任务是未完成的,这个切换完成状态的方法其实就是去修改这个 completed 属性的值。
实现这个功能,可以去监听任务项目的这个复选框的点击的事件,每次点击都会去执行一个方法,这个方法做的事就是保存与任务当前的 completed 属性的值相反的值,也就是如果当前任务的 completed 是 true ,保存的值就是 false ,如果是 false ,要保存的值就是 true 。
定义切换任务状态的方法
这个切换任务状态的方法修改的是跟模型相关的属性的值,所以,可以在任务模型里面,去定义这个方法,打开 js/Models/Todo.js,在 app.Todo 这个模型里面,去添加一个方法:
toggle: function() {
this.save({
completed: !this.get('completed')
});
}
toggle
,就是用来切换模型的状态的方法。在这个方法里,this.save
,表示的是使用当前这个模型的 save 方法,它可以保存模型的属性和值。在这个 save 方法里,设置了一个要保存的模型的 completed 这个属性还有对应的值,this.get
,表示使用当前模型的 get 方法去获取到模型里的指定的属性的值,这里就是得到 completed 这个属性的值。在它的前面,还有一个 !
号,这是一个否定逻辑运算符,这样,如果在它后面计算出来的结果是 true ,最终得到的结果就是 false,如果计算出来的结果是 false,用否定逻辑运算符运算之后,得到的结果就是 ture 。这样,每次执行这个 toggle 方法,都会保存与当前模型的 completed 的值相反的值。
监听发生在复选框上的点击事件
下面,再去监听在切换状态的复选框上发生的点击事件,发生点击事件以后,就去执行一下在模型定义的用来切换任务状态的 toggle 方法。因为这个复选框元素属于模型视图的一部分,所以可以在模型的视图上面去监听它的事件,打开 js/Views/TodoView.js,在视图里面监听 DOM 事件可以添加一个 events 属性:
// 监听 DOM 事件
events: {
'click .toggle' : 'toggleCompleted',
}
click 表示要监听是一个点击的事件,后面的 .toggle
,表示是发生在这个带有 .toggle 类的元素上面的点击事件,发生这个事件,去执行 toggleCompleted
这个方法,在下面,再去定义这个方法:
// 切换任务状态
toggleCompleted: function() {
this.model.toggle();
},
这个方法做的事,就是去执行与这个视图相关的那个模型里面的 toggle 方法,也就是刚才我们在模型里面定义用来切换任务状态的方法。
练习一
保存文件以后,用 Chrome 浏览器打开应用的主页 index.html ,打开浏览器的开发者工具(Mac:alt + command + I,Win:alt + ctrl + I),再打开 Resources 选项卡,Local Storage ,file:// 。
在应用的界面上,找到一条任务,然后点击切换状态的对号,完成以后,在浏览器的 Local Storage 里面,找到这条任务,观察一下它的 completed 属性的值,然后点击开发者工具左下角的刷新按钮,完成后,再看一下这条任务的 completed 属性的值。
练习二
下面,我们可以手工去执行一下模型的 toggle 方法,打开浏览器的控制台,然后按下面的步骤去试一下:
1. 找出在集合里面的一个模型,访问这个模型的 attributes 属性。观察它的 completed 属性的值。
app.todoList.at(0).attributes
2. 找出集合里面的一个模型,执行模型里面的 toggle 方法。
app.todoList.at(0).toggle()
3. 再次访问这个模型的 attributes 属性。观察它的 completed 属性的值。
app.todoList.at(0).attributes
4. 获取这个模型的 completed 属性的值。
app.todoList.at(0).get('completed')
JavaScript 应用开发 #4:切换任务的完成状态由源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/js/9784.html
JavaScript 应用开发 #4:切换任务的完成状态的更多相关文章
- NX二次开发-获取切换按钮的当前状态UF_MB_ask_toggle_state
NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- JavaScript 应用开发 #5:为完成的任务添加样式
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
- Javascript模块化开发-轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
随机推荐
- 【BZOJ 1191】 [Apio2010]特别行动队 (斜率优化)
dsy1911: [Apio2010]特别行动队 [题目描述] 有n个数,分成连续的若干段,每段的分数为a*x^2+b*x+c(a,b,c是给出的常数),其中x为该段的各个数的和.求如何分才能使得各个 ...
- QT类库与Delphi类库的体系结构对比——两者十分类似!
今天在看QT对象内存管理的一篇文章时:http://blog.csdn.net/dbzhang800/article/details/6300025想到了一个问题:就是QT类库体系结构与Delphi类 ...
- pdfminer的TextConverter得到文件字符无空格解决方法
from pdfminer.pdfinterp import PDFResourceManager, process_pdf from pdfminer.converter import TextCo ...
- 安卓高手之路之java层Binder
很多人一提到Binder就说代理模式,人云亦云的多,能理解精髓的少. 本篇文章就从设计角度分析一下java层BInder的设计目标,以及设计思路,设计缺陷,从而驾驭它. 对于[邦德儿]的理解, 从通信 ...
- 【转】 Android SDK无法更新解决方法---不错
原文网址:http://blog.csdn.net/shi_weihappy/article/details/41847997 自己的修改: 203.208.39.238 dl.google.com7 ...
- 在 SharePoint 2010 中访问数据
转:http://blog.banysky.net/?p=81001 数据访问的关键方法有哪些? | 使用查询类 | 使用 SPQuery | 使用 SPSiteDataQuery | 使用 LINQ ...
- Text Reverse
Text Reverse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- SAS软件的使用和统计学分析的初步介绍
一般而言我们都会使用Excel来统计测试结果,除了Excel之外,还有SAS等软件,也是可以统计测试结果的,本人也是SAS的初学者,现在我就给大家介绍一下SAS的简单使用,随着我不断的学 ...
- handlebars模板库的资源
web 开发中,js 解析JSON 是经常的事情.非常繁琐.handlebars 使用了模版,只要你定义一个模版,提供一个json对象,handlebars 就能吧json对象放到你定的模版中,非常方 ...
- JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解
这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...