博客

你在本地搭建了一个开发环境，可能是为 php 准备的，你在这个本地的开发环境上面做了一个项目，当你把它迁移到真正的服务器上的时候，你发现了一些问题。这很可能是因为你的本地开发环境与服务器的生产环境之间是有区别的。慢慢地，你又想试一下 node ，因为它跟 JavaScript 的关系不错。或者又对 ruby 产生了兴趣，只因为她有个好听的名字。尝试这些你都需要去安装一些软件，去配置它们的运行环境，你越来越发现，管理这些环境可能会是个问题。

Vagrant 可以让你为每个项目都创建一个虚拟机，你可以选择虚拟机运行的操作系统，去配置需要的环境，比如安装 Web 服务器，数据库管理系统等等。项目的目录可以放在你的电脑上，它会跟虚拟机上的一个目录同步。你的电脑与虚拟机之间可以相互访问，所以，你可以像往常一样，用自己喜欢的编辑器去开发 Web 应用，然后用虚拟机上配置好的环境去运行你的项目。使用 Vagrant，你可以在本地电脑上用虚拟机去配置一个跟 Web 应用的生产环境一样的环境，一样的操作系统，一样的软件，一样的配置。你还可以与团队里的其他成员分享你的开发环境，

两年前，我们发布了第一个 Bootstrap 框架的课程，介绍了 Bootstrap 2 的基本用法。今天咱们再一起学一下 Bootstrap 3 ，相比第二个版本的 Bootstrap，做了很多改进，Bootstrap 3 是一套移动优先的前端框架。移动优先就是，设计的所有的样式默认都会应用到移动设备上，然后在设计里，利用媒体查询，一步一步的增加对于其它尺寸设备的设计。

把鼠标放在任务项目的上面，会在任务标题的右边，出现一个删除的按钮，点击这个按钮，可以删除掉对应的任务。实现这个功能， 需要在任务模型的模板上面添加一个按钮元素，然后去监听这个按钮元素的点击事件，发生点击事件以后，去执行模型的 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 。在视图里面，我们可以去监听在页面上发生的事件，还有与视图相关的模型和集合的事件，可以去定义处理这些事件用的方法，可以设置包装数据用的元素等等。

来吧，是时候学一门后端语言了。php 仍然是世界上应用最广泛的 Web 开发语言，从今天开始，我们就一起学一下它。跟着这个系列文章还有相关的 php 视频课程，每天做一些练习，从这里，在今天！

准备

1. 在本地搭建一个支持 php 语言的 Web 开发环境。
2. 下载一款简单的文本编辑软件。
3. 安装 Chrome 浏览器。