Backbone的View更多的是组织代码的作用，它实际干的活很少。View的model属性在本节第一段代码用的是大写，表明只是一个名字，并不是说给View传一个Model它会替你完成什么，控制逻辑还是要自己写。还有View中经常会用到的template函数，也是要自己定义的，具体结合哪种模板引擎来用就看自己的需求了。
这段代码中的Gists比较难操作其中的每一个值，它其实应该是Gist的集合，这就是Backbone的Collection做的事了。
3. Collection
Collection是Model的集合，在这个Collection中的Model如果触发了某个事件，可以在Collection中接收到并做处理。第2节的代码用Collection实现：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script> <script type="text/javascript" src="https://underscorejs.org/underscore-min.js"></script> <script type="text/javascript" src="https://backbonejs.org/backbone-min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <table> <thead><th>description</th><th>URL</th><th>created_at</th><th></th></thead> <tbody></tbody> </table> <script type="text/javascript"> var Gist = Backbone.Model.extend(), Gists = Backbone.Collection.extend({ model: Gist, url: 'https://api.github.com/gists/public', parse: function (response) { return response; } }), gists = new Gists(); var GistRow = Backbone.View.extend({ tagName: 'tr', render: function (model) { this.el.innerHTML = '<td>' + model.get('description') + '</td><td>'+ model.get('url') + '</td><td>' + model.get('created_at') + '</td><td></td>' return this; } }); var GistsView = Backbone.View.extend({ el: 'tbody', collection: gists, initialize: function () { this.listenTo(this.collection, 'reset', this.render); }, render: function () { var html = ''; _.forEach(this.collection.models, function (model) { var tr = new GistRow(); html += tr.render(model).el.outerHTML; }); this.el.innerHTML = html; return this; } }); var gistsView = new GistsView(); gists.fetch({reset: true}); </script> </body> </html>
LINE17~23: 基本跟第2节的第2段代码一样。把Model改成Collection，指定Collection的Model，这样Collectio获得返回值会自动封装成Model的Array。
LINE38: Collection和Model不同，获取到数据也不会触发事件，所以绑定一个reset事件，在之后的fetch操作中传递{reset: true}。
LINE42~45: 从Collection从遍历Model，传给GistRow这个View，生成HTML。
Collection是Backbone里功能最多的函数（虽然其中很多是Underscore的），而且只要理解了Model和View的关系，使用Collection不会有任何障碍。给Collection绑定各种事件来实现丰富的交互功能了，以下这段JS代码会加入删除/编辑的操作，可以在JSBIN上查看源代码和执行结果。只是增加了事件，没有什么新内容，所以就不做说明了，附上JSBIN的演示地址：
/* 替换之前代码的JS部分(LINE16~51) */ var Gist = Backbone.Model.extend(), Gists = Backbone.Collection.extend({ model: Gist, url: 'https://api.github.com/gists/public', parse: function (response) { return response; } }), gists = new Gists(); var GistRow = Backbone.View.extend({ tagName: 'tr', render: function (model) { this.el.id = model.cid; this.el.innerHTML = '<td>' + model.get('description') + '</td><td>'+ model.get('url') + '</td><td>' + model.get('created_at') + '</td><td><a href="javascript:void(0)">X</a> <a href="javascript:void(0)">E</a> </td>' return this; } }); var GistsView = Backbone.View.extend({ el: 'tbody', collection: gists, events: { 'click a.js-remove': function (e) { var cid = e.currentTarget.parentElement.parentElement.id; gists.get(cid).destroy(); gists.remove(cid); }, 'click a.js-edit': 'editRow', 'blur td[contenteditable]': 'saveRow' }, editRow: function (e) { var tr = e.currentTarget.parentElement.parentElement, i = 0; while (i < 3) { tr.children[i].setAttribute('contenteditable', true); i++; } }, saveRow: function (e) { var tr = e.currentTarget.parentElement, model = gists.get(tr.id); model.set({ 'description' : tr.children[0].innerText, 'url': tr.children[1].innerText, 'created_at': tr.children[2].innerText }); model.save(); }, initialize: function () { var self = this; _.forEach(['reset', 'remove', 'range'], function (e) { self.listenTo(self.collection, e, self.render); }); }, render: function () { var html = ''; _.forEach(this.collection.models, function (model) { var tr = new GistRow(); html += tr.render(model).el.outerHTML; }); this.el.innerHTML = html; return this; } }); var gistsView = new GistsView(); gists.fetch({reset: true});
Afterword