Backbone.js 使用 Collection

在前面我们的 Backbone.js 用上了 Model, 但绝大数的情况下我们处理的都是一批的 Model 数据列表,所以需要有一个 Collection 来容纳 Model, 就像 Java 里最常用的 List。

声明 Collection 时需要指定他处理的 Model 类型,也就是个泛型参数,如我们这样定义 Collection:

然后就是往 Collection 中如何填充 Model 实例,有好多种,这里只演示最直接的方式。还 add, fetch, 及对 Collection 排序, 遍历等各种操作。

在创建 View 实例时把 collection 传递进去

模板中使用的是点操作符来获取属性,所以交给模板显示数据时需调用 Collection 的 toJSON() 转数据,即把字段从 attributes 中提出到外层来。在 View 中需要这样绑定集合数据:

模板中可用 _.each() 函数来遍历:

这样就能把 Collection 中的数据显示到页面上了,完整例子如下:

点击链接 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 Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments