在前面我们的 Backbone.js 用上了 Model, 但绝大数的情况下我们处理的都是一批的 Model 数据列表，所以需要有一个 Collection 来容纳 Model, 就像 Java 里最常用的 List。
声明 Collection 时需要指定他处理的 Model 类型，也就是个泛型参数，如我们这样定义 Collection:
|
1 2 3 4 |
//define Collection var PeopleCollection = Backbone.Collection.extend({ model: Person //like generic }); |
然后就是往 Collection 中如何填充 Model 实例，有好多种，这里只演示最直接的方式。还 add, fetch, 及对 Collection 排序, 遍历等各种操作。
|
1 2 3 4 5 6 7 8 9 10 11 |
//create collection instance var peopleCollection = new PeopleCollection([ { name: 'Mohit Jain', age: 23 }, { name: 'Taroon Tyagi', age: 25, } ]); |
在创建 View 实例时把 collection 传递进去
|
1 |
var peopleView = new PeopleView({collection: peopleCollection}); |
模板中使用的是点操作符来获取属性，所以交给模板显示数据时需调用 Collection 的 toJSON() 转数据，即把字段从 attributes 中提出到外层来。在 View 中需要这样绑定集合数据：
|
1 2 |
var data = {people: this.collection.toJSON()}; this.$el.html(template(data)); //fill in data |
模板中可用 _.each() 函数来遍历：
|
1 2 3 |
<% _.each(people, function(person) { %> <li><%= person.name %>, <%= person.age %></li> <% }); %> |
这样就能把 Collection 中的数据显示到页面上了，完整例子如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <ol id="container"></ol> <script type="text/template" id="person_template"> <% _.each(people, function(person) { %> <li><%= person.name %>, <%= person.age %></li> <% }); %> </script> </body> </html> <script> //define Model var Person = Backbone.Model.extend({ defaults : { name : 'unknown', age : 20 } }); //define Collection var PeopleCollection = Backbone.Collection.extend({ model: Person //like generic }); //define View var PeopleView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { var template = _.template($("#person_template").html()); var data = {people: this.collection.toJSON()}; this.$el.html(template(data)); //fill in data } }); //create collection instance var peopleCollection = new PeopleCollection([ { name: 'Mohit Jain', age: 23 }, { name: 'Taroon Tyagi', age: 25, } ]); //create view and bind model var peopleView = new PeopleView({collection: peopleCollection}); </script> |
点击链接 http://fiddle.jshell.net/Unmi/NeNsU/ 运行如上代码，页面输出为：
- Mohit Jain, 23
- Taroon Tyagi, 25
上面用的是 Underscore 的模板，在页面中可以单独的用 <% _.each([0,1,2,3,4], function(i) { %> <p><%= i %></p> <% }); %> 遍历数组 [0,1,2,3,4]。
本文链接 https://yanbin.blog/backbone-js-with-collection/, 来自 隔叶黄莺 Yanbin Blog
[版权声明] 
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。