在前面我们的 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. 项目冲刺First

    First Sprint 1.各个成员在 Alpha 阶段认领的任务(由于后面小组的讨论,修改本阶段的任务安排,()内为新任务安排) 蔡振翼:管理员界面.书籍管理,图书归还,消息,退出功能(撰写博客) ...

  2. BZOJ.2440.[中山市选2011]完全平方数(莫比乌斯函数 二分)

    题目链接 总感觉博客园的\(Markdown\)很..\(gouzhi\),可以看这的. 题意即求第\(k\)个无平方因子数. 无平方因子数(Square-Free Number),即分解之后所有质因 ...

  3. Dos常用命令大全

    dos命令进入文件夹 输入 D: 回车,进入D盘的根目录,然后输入dir 回车 可以查看根目录下的文件和文件夹,  输入 cd空格文件夹的名字(不区分大小写) 进入文件夹根目录下, 依次输入dir 查 ...

  4. slf4j 和 log4j合用的（Maven)配置

    简述: 添加logger的日志输出,下面是配置信息供备忘   步骤: 1. 在Maven的porn.xml 文件中添加dependency如下 <dependency> <group ...

  5. 没用过的函数 GetHomePath - 获取用户程序数据目录

    uses System.IOUtils; procedure TForm1.FormCreate(Sender: TObject); var S: string; begin { 三种方法结果一致: ...

  6. MikroTik RouterOS使用SATA光驱安装时提示：no CD-ROM found press ENTER to reboot

    可以尝试以下方式: 1.进入bios--Main--Storage configuration,找到SATA configuration ,设置为Compatible模式(即兼容模式.混合模式) 2. ...

  7. 10 个理由让你继续干 IT

    1.钱,钱,钱 对,我们努力工作就是为了赚钱,而IT专业人士的努力工作的确得到了很好的补偿.报酬不仅仅是好而已,而是非常棒.根据美国劳工部<2010年美国 就业与报酬情况概览>(表6,PD ...

  8. LPC-LINK 2 Board IO

  9. JS实现各种复制到剪贴板

    一.实现点击按钮,复制文本框中的的内容                         <script type="text/javascript"> function ...

  10. Python yield使用

    https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ 您可能听说过,带有 yield 的函数在 Python 中被称 ...