Backbone

把鼠标放在任务项目的上面，会在任务标题的右边，出现一个删除的按钮，点击这个按钮，可以删除掉对应的任务。实现这个功能， 需要在任务模型的模板上面添加一个按钮元素，然后去监听这个按钮元素的点击事件，发生点击事件以后，去执行模型的 destroy 方法，把模型删除掉。

在任务项目上添加删除按钮

先打开应用的主页 index.html ，然后找到定义任务模板的地方（#item-template），添加下面这行代码：

<button class="destroy"></button>

一个 button 标签，上面加上了一个叫 .destroy 的 css 类，在应用的样式表里，已经为这个类定义好了一些样式，一会儿我们也要用到这个类来定义这个元素。现在，任务的模板看起来像这样：

双击任务的标题，会显示一个用来编辑这个任务的文本框，在这个文本框里面，已经填写好了当前任务的标题的内容，用户可以编辑任务的标题，完成以后，按下回车键，或者点一下其它的地方，可以保存对任务标题的修改。实现这个编辑任务的功能，可以这样：

1. 在任务模型的模板里面添加一个包含任务标题的文本框，默认把它隐藏起来。
2. 双击任务标题后，隐藏任务标题，再把用来编辑任务的文本框显示出来。
3. 按下回车键或点击其它的地方，都会触发相应的事件，去监听这些事件。
4. 得到在编辑任务的文本框里面的内容，并且把它保存起来。

判断一下任务的状态，如果是完成的任务，可以在任务项目的上面，添加一个额外的 css 类，在这个 css 类里，可以去定义完成的任务的样式。比如，把文字的颜色变成浅友色，并且在文字上面添加一条删除线。这些样式，已经在应用的样式表里定义好了，放在了一个叫 .completed 的 css 类里面。下面，我们要做的就是把这个类添加到是完成的状态的任务项目上去。

要解决的问题

1. 怎么样得到模型的属性的值。
2. 怎么样为模型添加合适的 css 类。
3. 怎么样在任务模型的完成状态发生变化时，立即更新任务项目的显示。

得到模型的属性的值，用的就是模型的 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 。在视图里面，我们可以去监听在页面上发生的事件，还有与视图相关的模型和集合的事件，可以去定义处理这些事件用的方法，可以设置包装数据用的元素等等。

在 《 Backbone 应用实例 》 这个课程里面，我们会一起用 JavaScript 做一个小应用，它可以管理任务列表，应用可以创建新任务，编辑还有删除任务等等。这个实例非常好的演示了使用 JavaScript 来开发富应用，它也能让你对 JavaScript 有一个更好的理解。所以，我们接下来会分成几天，把这个小应用的功能，分成几个部分，介绍每个小功能的细节。跟着这篇文章，或者 《 Backbone 应用实例 》 这个课程，动手练习一下。效果会非常好。

在文章里面，我会把需要的代码粘出来，不过我建议你不要直接去复制跟粘贴。每一个目录，每一个文件，每一行代码，最好可以亲自动手去做出来。这期间我们也会不断的回到浏览器上去测试，这样你能更好的理解，每个步骤的作用。每一个动作，都要动手去试一下。

在 《 Developing Backbone.js Applications 》这本书里，介绍了一个 Backbone 的应用实例，就是一个任务管理的小应用程序。我觉得这个实例是对我们所学的 JavaScript 课程的很好的总结。所以，针对这个实例，做了一个相关的视频课程。就是这个 《 Backbone 应用实例 》。目前这个课程还在制作中，今天发布了其中的一部分。

在前天我们稍稍地发布了 Backbone 的基础教程，应该有很多朋友不知道什么是 Backbone，它能干什么。我想通过几个用到了 Backbone.js 的网站应用的真实案例，您就应该会对它有点感觉了，如果想再多来点感觉，了解它是怎么回事儿，可以再花两个小时看一下宁皓网最新的 Backbone 课程。

Rdio

Rdio 是一个音乐电台网站，是基于 Backbone 创建的。屏幕上的每个小组件都可以动态的加载与显示，数据是由 Rdio API 提供的。当发生了变化，每个组件都可以更新它自己，不会影响用户正在听的音乐，也不用刷新整个页面。这些都是依赖于 Backbone 的视图与模型，并且所有的 URL 都是由 Backbone 的路由器处理的。当数据变化的时候，Backbone 的事件会通知相应的组件有数据发生了变化。Backbone 是 Rdio 这款应用的核心。