下面，我们想办法去把任务项目，或者叫任务的模型，显示到应用的界面上。

往任务的集合里面添加新的任务模型的时候，会触发 add 事件，我们可以去监听这个事件 ... 当发生这个事件的时候，就去把新添加到集合里面的任务项目添加到应用的界面上。

可以在应用视图的初始化的方法里面去监听这个集合的 add 事件 ..

打开这个应用视图的文件 ... 然后添加一个初始化的方法 ... initialize ..

initialize: function() {}

然后在这个方法里面，可以使用 Backbone 的 listenTo 这个方法，去监听事件 ... this.listenTo ，表示，使用这个视图的 listenTo 方法 ... 然后在这个方法里面，先指定一下发生这个要监听的事件的对象 ... 这里就是应用的集合对象 ... 可以使用 app.todoList 来表示 ...

第二个参数是要监听的事件 ... 这里就是 add 这个事件 ... 最后，再指定一下处理这个事件要用到的方法 ... this.addOne ... 表示使用这个视图里面的 addOne 这个方法去处理发生在任务集合上面的 add 这个事件 ...

this.listenTo(app.todoList, 'add', this.addOne);

在下面，我们再去定义这个 addOne 方法 ... 发生 add 事件的时候，会把模型传递给处理它的方法 ... 这里，我们用 todo 来表示这个传递过来的模型 ...

addOne: function(todo) {}

然后在这个方法里面，可以根据这个任务项目去创建一个新的任务视图 ... 然后再把渲染之后的任务视图的 el 属性里面的东西添加到界面上 ...

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

这个视图叫做 todoView ... 在新建这个视图的时候，设置一下 model 属性 ... 对应的值，就是传递过来的那个任务模型 ，这里我们用 todo 来表示这个模型数据。

然后用 jQuery ，找到 #todo-list 这个元素 ... 打开 index.html ... 在这里，你可以看到一个 ul 元素，上面有一个 id 就是 todo-list ， 在这个元素里面的东西就是任务项目的列表。

回到视图 ... 找到以后，用 jQuery 的 append 方法，去把渲染以后的任务视图的 el 属性，追加到这个元素上去 ...

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

测试

先保存一下 ... 下面，还是先到浏览器上试试 ...

在文本框里输入任务的标题 ... 给小孩买奶粉 ... 按下回车 ...

你会看到，在下面， 直接会显示出新创建的这个任务 ...

下面， 刷新一下这个应用的主页 ... 显示在界面上的任务就不见了 ... 我们需要在应用视图的初始化的方法里面，去把存储在 Local Storage 里的模型提取出来 ...

视图

回到应用的视图 ... 在 initialize 这个方法里面，使用集合的 fetch() 方法，可以从数据源那里把模型提取出来，再放到集合里面 ... 这样，也会去触发集合的 add 事件 ... 发生这个事件，就会去执行 addOne 这个方法 ... 也就会把任务模型显示到界面上 ...

app.todoList.fetch();

保存 ... 再回到浏览器 ... 刷新 ...

在这里，会显示出存储在 Local Storage 里面的所有的任务项目 ...