在前面我们的 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. BZOJ.1018.[SHOI2008]堵塞的交通(线段树维护连通性)

    题目链接 只有两行,可能的路径数不多,考虑用线段树维护各种路径的连通性. 每个节点记录luru(left_up->right_up),lurd,ldru,ldrd,luld,rurd,表示这个区 ...

  2. CS1.6找金钱和人物血量

    一.查找金钱数量 先搜索800 然后购买东西,再搜索剩下的钱 然后发现有两个地址,一个绿色的地址(也就是静态地址),还有一个动态地址 经过测试后,静态地址的值是对应屏幕上的值,而真正实际的金钱是那个动 ...

  3. 利用HTTP Cache来优化网站

    原文地址: http://www.cnblogs.com/cocowool/archive/2011/08/22/2149929.html 对于网站来说,速度是第一位的.用户总是讨厌等待,面对加载的V ...

  4. excel 批注

    Excel VBA之Name对象.Comment对象及字体设置等,点滴学习积累 存在的方式 百家号11-1518:46 ======================================== ...

  5. java中Double类数字太大时页面正常显示而不要用科学计数法

    /** * 当浮点型数据位数超过10位之后,数据变成科学计数法显示.用此方法可以使其正常显示. * @param value * @return Sting */ public static Stri ...

  6. Netty之解决TCP粘包拆包(自定义协议)

    1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...

  7. WordPress基础：get_page_link获取页面地址

    函数:get_page_link(页面id编号) 作用:获取指定页面的链接地址 用法: $link = get_page_link(2); 输出为:xxx/?page_id=2 如在循环里则不用填写i ...

  8. ibatis.net：第五天，QueryForObject

    xml <statement id="LoadOrder" parameterClass="int" resultClass="Order&qu ...

  9. Android之sqlite3命令行简单使用

    首先需要定位到database所在的目录里面,然后使用命令 sqlite3 databasename(数据库的名字)进入 常用命令: 1. .table     列取该数据库下面的数据表名 2. .s ...

  10. Easyui 页面设置加载完成之后,满屏

    js文件: if(top.location!=self.location){ top.location.href=self.location; }