Backbone.js 使用 Collection

calendar Jan 9, 2014   ---   · 2 min read · javascript Backbone  ·
Share on: linkedin copy
在前面我们的 Backbone.js 用上了 Model, 但绝大数的情况下我们处理的都是一批的 Model 数据列表，所以需要有一个 Collection 来容纳 Model, 就像 Java 里最常用的 List。


声明 Collection 时需要指定他处理的 Model 类型，也就是个泛型参数，如我们这样定义 Collection:
1//define Collection
2var PeopleCollection = Backbone.Collection.extend({
3    model: Person //like generic
4});

然后就是往 Collection 中如何填充 Model 实例，有好多种，这里只演示最直接的方式。还 add, fetch, 及对 Collection 排序, 遍历等各种操作。
 1//create collection instance
 2var peopleCollection = new PeopleCollection([
 3    {
 4        name: 'Mohit Jain',
 5        age: 23
 6    },
 7    {
 8        name: 'Taroon Tyagi',
 9        age: 25,
10    }
11]);

在创建 View 实例时把 collection 传递进去
1var peopleView = new PeopleView({collection: peopleCollection});

模板中使用的是点操作符来获取属性，所以交给模板显示数据时需调用 Collection 的 toJSON() 转数据，即把字段从 attributes 中提出到外层来。在 View 中需要这样绑定集合数据：
1var data = {people: this.collection.toJSON()};
2this.$el.html(template(data)); //fill in data

模板中可用 _.each() 函数来遍历：
1<% _.each(people, function(person) { %>
2    <li><%= person.name %>, <%= person.age %></li>
3<% }); %>

这样就能把 Collection 中的数据显示到页面上了，完整例子如下：
 1<!DOCTYPE html>
 2<html>
 3     <head>
 4         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 5         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
 6         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
 7     </head>
 8     <body>
 9         <ol id="container"></ol>
10
11        <script type="text/template" id="person_template">
12            <% _.each(people, function(person) { %>
13                <li><%= person.name %>, <%= person.age %></li>
14            <% }); %>
15        </script>
16     </body>
17 </html>
18
19 <script>
20    //define Model
21    var Person = Backbone.Model.extend({  
22        defaults : {
23            name : 'unknown',  
24            age : 20
25        }  
26    });
27
28    //define Collection
29    var PeopleCollection = Backbone.Collection.extend({
30        model: Person //like generic
31    });
32
33    //define View
34    var PeopleView = Backbone.View.extend({
35        el: '#container',
36        initialize: function(options) {
37            this.render();
38        },
39        render: function() {
40            var template = _.template($("#person_template").html());
41            var data = {people: this.collection.toJSON()};
42            this.$el.html(template(data)); //fill in data
43        }
44    });
45
46    //create collection instance
47    var peopleCollection = new PeopleCollection([
48        {
49            name: 'Mohit Jain',
50            age: 23
51        },
52        {
53            name: 'Taroon Tyagi',
54            age: 25,
55        }
56    ]);
57
58    //create view and bind model
59    var peopleView = new PeopleView({collection: peopleCollection});
60
61 </script>

点击链接 http://fiddle.jshell.net/Unmi/NeNsU/ 运行如上代码，页面输出为：
  1. Mohit Jain, 23
  2. 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's Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。