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

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

//define Collection

var PeopleCollection = Backbone.Collection.extend({

    model: Person //like generic

});

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

//create collection instance

var peopleCollection = new PeopleCollection([

    {

        name: 'Mohit Jain',

        age: 23

    },

    {

        name: 'Taroon Tyagi',

        age: 25,

    }

]);

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

var peopleView = new PeopleView({collection: peopleCollection});

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

var data = {people: this.collection.toJSON()};

this.$el.html(template(data)); //fill in data

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

<% _.each(people, function(person) { %>

     <li><%= person.name %>, <%= person.age %></li>

 <% }); %>

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

<!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/ 运行如上代码，页面输出为：

  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]。

Backbone.js 使用 Collection的更多相关文章

  1. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  2. [Backbone.js]如何处理Model里面嵌入的Collection?

    写了近半个月的backbone.js代码,从一开始的todo到现在做仿微信的网页聊天,其中最大的困惑就在于如何处理比较复杂的Model,其内嵌了一个或者多个Collections. 假设我们有一个Pe ...

  3. backbone.js 教程(1) View & Model & Collection

    Backbone.js Overview 它由Jeremy Ashkenas开发,最初发行于2010-10-13 它是一个轻量的JavaScript类库,只依赖于underscore.js,非强制依赖 ...

  4. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  5. Backbone.js应用基础

    前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...

  6. 我对Backbone.js的一些认识

    backbone.js已经不是当前最流行的前端框架了,但是对于我而言,依然具有比较好的学习价值.虽然目前来说,react,vue等mvvm框架非常火热,但是感觉自身还不到去使用这种框架的层次.这些技术 ...

  7. Backbone.js学习之Backbone.View（视图）

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  8. 用Backbone.js创建一个联系人管理系统(五)

    原文: Build a Contacts Manager Using Backbone.js: Part 5 这是这系列教程最后一部分了. 之前所有的增删改都在前端完成. 这部分我们要把Contact ...

  9. 用Backbone.js创建一个联系人管理系统(三)

    原文: Build a Contacts Manager Using Backbone.js: Part 3 欢迎回到这系列的教程,关注使用Backbone.js构建应用程序. 如果你还没看过第一,二 ...

随机推荐

  1. BZOJ2944 : [Poi2000]代码

    对于根,要让它的排名尽量小,也就是要让右子树的点数尽量多. 于是从大到小枚举右子树的点数,用Catalan数计算方案数,直到找到相应的右子树的点数为止. 此时根的排名已经确定,接下来要让左子树的代码的 ...

  2. 【BZOJ】1854: [Scoi2010]游戏【二分图】

    1854: [Scoi2010]游戏 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 6759  Solved: 2812[Submit][Status] ...

  3. C#开发利器 Linq Pad 相关

    一,下载 Linq Pad 是平时在开发的过程中使用的利器,为什么这样说了. 你不用打开VS, 直接敲代码就行,F5运行即可以看到结果. 而且支持Linq, 是不错的选择. 最近想开发一个日志分析工具 ...

  4. CentOS 7 yum 安装subversion

    yum list installed | grep subversionyum install subversioncd /var/wwwsvn -hsvn co svn://121.196.226. ...

  5. 自动添加 Qt 开发生成的 exe 所需的依赖环境

    双击获取 exe 文件路径 cd 进入文件目录的命令 调用 Qt 自带的软件进行环境配置,命令如下 windeployqt ***.exe 自动配置了依赖环境

  6. ibatis的缓存机制

    Cache        在特定硬件基础上(同时假设系统不存在设计上的缺漏和糟糕低效的SQL 语句)Cache往往是提升系统性能的最关键因素).        相对Hibernate 等封装较为严密的 ...

  7. PHP 服务端 和 APP 客户端 实现 RSA+AES 双向加密解密

    目的:服务端和移动端双向加密解密 共有七个文件 其中包括三个类文件 lib_aes.php aes对称加密解密类 server_rsa_crypt.php 服务端RSA公钥私钥非对称加密解密类 cli ...

  8. jQuery遍历刚创建的元素

    对于刚创建的元素,使用jQuery的each方法,有时候会不起作用.解决方案大致有2种: 1.刚创建完的时候,就使用each方法 $('#btn').on("click", fun ...

  9. require.js 简洁入门

    原文地址:http://blog.sae.sina.com.cn/archives/4382 前言 提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多 ...

  10. Hadoop-2.2.0中文文档—— Common - Native Libraries Guide

    概览 这个新手教程描写叙述了native(本地?原生?)hadoop库,包括了一小部分关于native hadoop共享库的讨论. This guide describes the native ha ...