2025 独立开发者训练营:AI Agent!查看介绍 / 立即报名 →
双击任务的标题,会显示一个用来编辑这个任务的文本框,在这个文本框里面,已经填写好了当前任务的标题的内容,用户可以编辑任务的标题,完成以后,按下回车键,或者点一下其它的地方,可以保存对任务标题的修改。实现这个编辑任务的功能,可以这样:
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式。比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线。这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面。下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去。
得到模型的属性的值,用的就是模型的 get 方法。这里我们要得到的是模型的 completed 属性的值,如果它的值是 ture ,就在这个模型上面去添加一个 .completed 类,如果是 false ,如果在任务项目上有 .completed 类,就从任务项目上面去掉这个 .completed 的 css 类。
在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成。所以, 我们需要一个可以切换任务完成状态的方法。在任务模型里面,表示任务状态的属性是 completed,它的值是 true 表示任务是完成的,如果是 false 就表示任务是未完成的,这个切换完成状态的方法其实就是去修改这个 completed 属性的值。
实现这个功能,可以去监听任务项目的这个复选框的点击的事件,每次点击都会去执行一个方法,这个方法做的事就是保存与任务当前的 completed 属性的值相反的值,也就是如果当前任务的 completed 是 true ,保存的值就是 false ,如果是 false ,要保存的值就是 true 。
这个切换任务状态的方法修改的是跟模型相关的属性的值,所以,可以在任务模型里面,去定义这个方法,打开 js/Models/Todo.js,在 app.Todo 这个模型里面,去添加一个方法:
到目前为止,我们已经在应用里面,创建了表示数据的模型,表示数据列表的集合,组织模型显示的视图与模板。下面, 我们要想办法,去把模型的列表显示在应用的界面上。这样我们就可以再去为应用创建一个主要的视图,用它来控制应用的主要的显示。
在用 Backbone 开发的 JavaScript 应用里面,除了模型与集合以外,另一个重要的部分就是视图,英文是 View 。在视图里面,我们可以去监听在页面上发生的事件,还有与视图相关的模型和集合的事件,可以去定义处理这些事件用的方法,可以设置包装数据用的元素等等。
来吧,是时候学一门后端语言了。php 仍然是世界上应用最广泛的 Web 开发语言,从今天开始,我们就一起学一下它。跟着这个系列文章还有相关的 php 视频课程,每天做一些练习,从这里,在今天!
在 《 Backbone 应用实例 》 这个课程里面,我们会一起用 JavaScript 做一个小应用,它可以管理任务列表,应用可以创建新任务,编辑还有删除任务等等。这个实例非常好的演示了使用 JavaScript 来开发富应用,它也能让你对 JavaScript 有一个更好的理解。所以,我们接下来会分成几天,把这个小应用的功能,分成几个部分,介绍每个小功能的细节。跟着这篇文章,或者 《 Backbone 应用实例 》 这个课程,动手练习一下。效果会非常好。
在文章里面,我会把需要的代码粘出来,不过我建议你不要直接去复制跟粘贴。每一个目录,每一个文件,每一行代码,最好可以亲自动手去做出来。这期间我们也会不断的回到浏览器上去测试,这样你能更好的理解,每个步骤的作用。每一个动作,都要动手去试一下。
在 《 Developing Backbone.js Applications 》这本书里,介绍了一个 Backbone 的应用实例,就是一个任务管理的小应用程序。我觉得这个实例是对我们所学的 JavaScript 课程的很好的总结。所以,针对这个实例,做了一个相关的视频课程。就是这个 《 Backbone 应用实例 》。目前这个课程还在制作中,今天发布了其中的一部分。
在前天我们稍稍地发布了 Backbone 的基础教程,应该有很多朋友不知道什么是 Backbone,它能干什么。我想通过几个用到了 Backbone.js 的网站应用的真实案例,您就应该会对它有点感觉了,如果想再多来点感觉,了解它是怎么回事儿,可以再花两个小时看一下宁皓网最新的 Backbone 课程。
Rdio 是一个音乐电台网站,是基于 Backbone 创建的。屏幕上的每个小组件都可以动态的加载与显示,数据是由 Rdio API 提供的。当发生了变化,每个组件都可以更新它自己,不会影响用户正在听的音乐,也不用刷新整个页面。这些都是依赖于 Backbone 的视图与模型,并且所有的 URL 都是由 Backbone 的路由器处理的。当数据变化的时候,Backbone 的事件会通知相应的组件有数据发生了变化。Backbone 是 Rdio 这款应用的核心。
用微信扫描二维码, 加我好友。
用微信扫描二维码, 订阅宁皓网公众号。
用 QQ 扫描二维码, 加入宁皓网 QQ 群。