在前面我们的 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. LOJ.121.[离线可过]动态图连通性(线段树分治 按秩合并)

    题目链接 以时间为下标建线段树.线段树每个节点开个vector. 对每条边在其出现时间内加入线段树,即,把这条边按时间放在线段树的对应区间上,会影响\(O(\log n)\)个节点. 询问就放在线段树 ...

  2. Codeforces Round #258 (Div. 2) D. Count Good Substrings 水题

    D. Count Good Substrings 题目连接: http://codeforces.com/contest/451/problem/D Description We call a str ...

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

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

  4. Fiddler 实现手机的抓包

    Fiddler是我最喜爱的工具,几乎每天都用, 我已经用了8年了. 至今我也只学会其中大概50%的功能. Fiddler绝对称得上是"神器", 任何一个搞IT的人都得着的. 小弟我 ...

  5. 任务调度框架Hangfire 简介

    任务调度是我们项目中常见的功能,虽然任务调度的功能实现本身并不难,但一个好用的轮子还是可以给我们的开发的效率提升不少的. 在.net环境中,较为有名的任务调度框架是HangFire与Quartz.NE ...

  6. Drectx 3D窗口后台截图

    //GDI与DX截屏API操作 LPDIRECTDRAW lpDD = NULL; LPDIRECTDRAWSURFACE lpDDSPrime = NULL; LPDIRECTDRAWSURFACE ...

  7. spring源码之—Assert.notNull

    org.springframework.util.Assert Assert翻译为中文为"断言".用过JUNIT的应该都知道这个概念了. 就是断定某一个实际的值就为自己预期想得到的 ...

  8. 使用VMWare虚拟机创建CentOS版本号的Linux学习环境(每一步都有截图与说明)

    学习Android开发.假设不学习Linux的基本使用,总感觉心里过意不去,由于毕竟Android还是搭载在Linux的基础之上的. 因此.学习一种Linux系统的基本操作.对我们以后的学习还是非常有 ...

  9. 设置TOMCAT SESSIONID 字符长度和生成算法

    修改TOMCAT 默认的生成SESSION ID的算法和字符长度非常简单,只需修改context.xml中的<Manager>标签值,比如: <Manager sessionIdLe ...

  10. vi 方向键 ABC

    解决方法:修改/etc/vim/vimrc.tiny ,增加set nocompatible,然后 保存,作用是关闭 vi 兼容模式