下面，我们可以去给应用里面的单个的任务项目，去添加一个视图。在这个任务模型的视图上面，我们需要去设计任务项目的显示的模板，去监听一些 DOM 还有模型的事件，定义处理的方法等等。在后面，我们会一步一步的去完善这个视图里的东西。

应用的视图，放在了 js 目录下面的 Views 这个目录的下面 ... 打开这里的 TodoView.js 这个文件 ... 我们可以把任务的视图放在这个文件里面。

在文档头部同样需要去使用一个命名空间的对象 ...

var app = app || {};

另起一行，再去定义视图 ... 这个视图可以叫做 TodoView ... app.TodoView ... 让它等于 Backbone 的 View 的 extend ...

然后在这个视图里面，我们先去指定一下每个任务项目的标签 ... 设置一下 tagName 这个属性 ... 它的值就是标签的名字 ... 在这里，我们设置成 li ... 这样每个任务项目都会用一组 li 标签包装一下。

app.TodoView = Backbone.View.extend({
tagName: 'li'
})

模板

下面，我们再去设计一下要用到的模板，这个模板就是组织每个任务项目用的 ... 先来看一下完成之后的应用 ...

这里，每个任务项目，最左边是一个复选框 ... 用来切换任务的状态 ... 接着是任务的标题 ... 最后还有一个 删除 按钮 ... 另外还有一个东西，默认是看不到的 ... 双击这个任务标题 .. .会显示一个文本框 ... 可以用来编辑任务的标题 ...

这些东西需要的元素，还有结构，都可以定义在模板里面。

回到编辑器 ... 打开应用的主页 ... index.html

在这里，我们可以去定义需要的模板 ... 随便找一下地方 ..

Backbone 里面的模板功能是第三方来提供的 ... 这里我们用的是 Underscore 这个类库提供的一个简单的模板功能。

先添加一组 script 标签 ... 加上一个 type 属性 ... 属性的值设置成 text/template ... 这样浏览器不会把它解释成脚本的代码 ...

然后再添加一个 id 属性 ... 这个属性的值，就相当于是模板的名字 .. 一会儿我们需要用到它来定位这个模板里的内容 ...

这里可以叫它 item-template ...

在这组标签里面就是模板的具体的结构 ... 先添加一组 div 标签 ... 上面加上一个叫 view 的 CSS 类 ...

然后在它里面，再添加一个用来切换任务状态的复选框元素 ... 就是一个 checkbox 类型的 input 元素 ... 上面再添加一个 css 类 .. 叫做 toggle ... 在视图里面，我们也需要用到这个类来定义这个切换状态的复选框元素 ...

然后，这个复选框是否是被勾选的 ... 我们需要判断一下 ... 要根据任务的 completed 的值来决定 ... 如果它的值是 true ... 就 添加一个 checked ，表示这个复选框元素是被勾选上的 ... 如果 completed 的值是 false .... 那么就不需要添加这个 checked 属性 ...

可以这样 ....

<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>

这里的 <%= 还有 %> 是 Underscore 的模板功能需要用到的一个特殊的标记 ... 在这组特殊标记里面，我们判断了任务的 completed 属性的值 ... 根据它的值，决定是否要添加 checked 这个属性 ...

另起一行，再添加一组 label 标签 ... 它里面的值，就是任务的标题内容 ...

<label><%= title %></label>

这个特殊标记的值，我们会在视图里面，传递给模板 ...

另外，这个模板里面，还需要一些其它的东西，比如删除任务的按钮，还有编辑任务的文本框 ... 在后面介绍到相关功能的时候，我们再回来修改一下这个模板 ...

保存 ...