我们可以给集合也准备一个视图，然后把集合里面的每一个渲染之后的模型的视图，都放到这个集合的视图里面。 下面，我们先去新建一个视图 .. 命名为 NoteCollectionView ...

var NoteCollectionView = Backbone.View.extend({})

然后，可以先设置一下视图的 el 属性 ... 默认这个属性的使用的标签是 div ... 这里，我们可以把这个标签设置成 ul ，无序列表标签 ...

tagName: 'ul',

然后我们要做的就是，去把集合里面的每个模型，使用模型的视图渲染一下，然后把它渲染之后的结果，添加到这个集合视图里面。

先去创建一个这个集合视图的实例 ... 可以叫它 noteCollectionView ... 创建的时候，给它指定一下在这个视图里用到的集合 ...

var noteCollectionView = new NoteCollectionView({collection: noteCollection});

在上面，我们再去创建这个集合 ... 在这个集合里，添加几个模型 ... note1, note2, note3

var noteCollection = new NoteCollection([note1, note2, note3]);

再回到定义这个集合视图的地方 ...

设置一下视图的 render 方法 ... 我们要把集合里面的每一个模型都添加到这个集合视图的 el 属性里面 ...

因为在实例化这个视图的时候，已经给它指定了要用到的集合 ... 所以，在这里，我们可以使用 this.collection ，得到这个集合 ...

调用 each 方法，去循环的处理集合里的模型 ... 这是一个在 Underscore 里面带的方法，你可以参考宁皓网的《Underscore 基础教程》去了解更多关于 Underscore 的使用。

在这个方法里，先指定一下处理模型用到的函数 .. this.addOne ... 等会儿，再去定义这个 addOne 方法 ...

然后我们需要把上下文设置成 this ...

this.collection.each(this.addOne, this);

在这个 render 方法里，一般最后都要用一个 return this ... 这样我们就可以使用链式调用其它的方法 ...

return this;

在下面，再去定义 addOne ...

这个方法可以授受一个模型参数 ... 可以使用 note 表示 .. 然后，我们要根据集合里的每个模型，去创建一个 Note 视图 ...

var noteView = new NoteView({model: note})

再去调用这个 Note 视图的 render 方法，得到渲染之后的 Note 视图的 el 属性，再把它追加到这个集合视图的 el 里面 ..

this.$el.append(noteView.render().el);

为了可以使用这样的链式调用，我们得去改一下 NoteView 这个视图的 render 方法 ... 在这里，用一个 return this; ...

下面，我们可以再去设置一下这个视图的 initialize 方法 ... 也就是在初始化这个视图的时候，要做的事 ...

可以去监听集合的 add 事件 .. 这样当有新的模型添加到集合里面的时候，再去执行一次这里的 addOne ... 把新的模型渲染以后，再追加到集合视图里面。 最后，再初始化的时候，去执行一下这个视图对象的 render() 方法 ...

initialize: function() {
this.collection.on('add', this.addOne, this);
this.render();
},

保存 ... 打开浏览器 ... 控制台 ... 输入 noteCollectionView.el

得到的结果就是，渲染之后的 note 模型的列表 ... 这个列表会包含在集合视图里面。

我们可以把这个结果添加到页面上 .. 回到应用的首页，添加点 html 元素 ..

div.container>h1.page-header{Collection View}+div#note_list

这里有一组 div 标签 ，上面有一个 note_list 的 id ... 我们可以把渲染之后的集合视图里的内容放到这个元素里面。

再回到控制台 ... 先找到刚才添加的那个 div 元素 .... 可以使用 id 定位到这个的元素 ... 然后使用 html 方法，设置一下它里面的内容 ... 内容就是 noteCollectionView 的 el 属性 ...

jQuery('#note_list').html(noteCollectionView.el)

下面，我们再新建一个模型 ...

var note5 = new Note({id: 5, title: '今天天气不错'})

然后，把它添加到集合里面 ...

noteCollection.add(note5)

在屏幕上显示的模型列表里面，会立即显示出新添加进来的模型 ...