在上一个视频里，我们定义了一个模板，下面，我们在视图里面，去利用一下这个模板 .. 打开 TodoView 这个视图..

在个视图里面，可以添加一个模板的属性 ... 这里我们叫它 itemTemplate ... 你可以根据自己的需求去命名一下这个模板属性 ...

它的值是 Underscore 的 template 这个方法 ... 在这个方法里，要把模板的具体的内容交给它 ... 得到在 index.html 里面定义的模板的内容，可以使用 jQuery ... 要定位的元素就是定义模板的 script 标签 ... 这个标签上定义了一个叫 item-template 的 id ... 可以用它来定义这个元素 ... 再调用 jQuery 的 html () 这个方法，得到这个元素里面的具体的内容。

下面， 我们再定义一下视图里的 render 方法 ... 去用这个模板，组织一下任务模型的内容 ... 这样为视图指定了任务模型以后，调用视图的这个 render 方法，渲染一下，视图里面的 el 属性，就会用定义好的模板，还有指定的标签，去组织好任务模型的内容。

render: function() {}

在这个方法里，设置一下视图的 el 属性里面的内容 ... this.$el.html() ，this 表示当前的这个视图对象 ... $el 是把视图的 el 属性转换成一个 jQuery 对象的一个简单的写法 ... jQuery 的 html 这个方法可以设置一下它里面的具体的内容 ..

它的内容就是用这个视图里的 itemTemplate 这个方法 ... 这个方法就是刚才在上面定义的这个 ... 然后把模型里的属性交给这个方法 ... 用 this.model.attributes 可以得到模型的属性 ... 得到的应该是一个对象 ... 在我们定义的模板里面，用代号表示的名字，比如 title ，completed ... 这些东西是跟这个模型里面的属性是对应的 ...

这样在调用这个 render 方法以后，就会用模板里定义的结构，模板里的代号会用属性的具体的值代替 ...

this.$el.html(this.itemTemplate(this.model.attributes));

最后，为了可以使用链式调用 ... 需要再使用一个 return this ... 返回当前的视图 ....

return this;

测试

保存 ... 然后再到浏览器上测试一下 ...

我们可以先新建一个任务模型 .. 直接设置一下这个模型的 title 属性 ...

var todo = new app.Todo({title: '发布新的课程'})

然后再去创建一个任务视图 ... 可以叫它 todoView .... 在创建这个视图的时候，可以指定一下相关的模型 ... 这里我们设置成在上面创建的这个模型 .. todo ...

var todoView = new app.TodoView({model: todo})

再去调用这个视图的 render 方法 ... 这样会用模板去组织一下模型里的数据 ... 因为在这个 render 方法里，返回了视图 ... 所以，可以继续调用其它的方法和属性 ... 比如我们可以得到渲染之后的视图的 el 属性 ...

todoView.render().el

这里你会看到，会用一组 li 标签 ... 这是在定义视图的时候，指定要使用的标签 ... 它里面包装的东西，就是用我们定义好的模板组织好的任务模型的内容 ...

先是一组带 view 类的 div 标签 . 在它里先是一个用来切换任务状态的复选框 ... 接着是一个任务的标题 ...

最后，使用 jQuery 的方法，可以把这些内容添加到页面上显示出来 ... 在 index.html 里面，显示任务列表的位置上，有一个 ul 元素，上面有一个 todo-list 的 id ，可以使用这个 id 来定义到这个元素 ...

然后再调用 append 方法，把指定的东西，添加到这个元素里面 ... 要添加的东西，就是渲染之后的模型视图 ..

$('#todo-list').append(todoView.render().el)

回车 ... 在页面上，会显示出这个任务项目 ...