在前面我们的 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. Scanner和BufferedReader的区别和用法

    在命令行模式下要输入数据至程序中时,我们可以使用标准输入串对象System.in.但是,我们并不经常直接使用它,因为System.in提供的 read方法每次只能读取一个字节的数据,而我们平时所应用的 ...

  2. 理解JVM模型

    概括 JVM运行时数据区可以划分为5部分,分别是:程序计数器.虚拟机栈.本地方法栈.堆.方法区 程序计数器(Program Counter Register) 相当于当前线程所执行字节码的行号指示器. ...

  3. POP3_关于 multipart/related;boundary=

    http协议对mime类型有详细描述,multipart/....是单个消息头包含多个消息体的解决方案.multipart媒体类型对发送非文本的各媒体类型是有用的.目前常用的有这些subtype: M ...

  4. C#操作sqlite数据库使用SQLiteParameter传递参数

    C# code public void AddIMG_ENTRY(img_entry model) { StringBuilder strSql = new StringBuilder(); strS ...

  5. LDO current regulator for power LED

    LDO current regulator for power LED Challenge You've got a power LED? Great! Build a flash light! Wh ...

  6. OpenOCD 0.9.0 release

    OpenOCD 0.9.0 release May 18th, 2015 I’m happy to announce the release of OpenOCD version 0.9.0, fin ...

  7. [译] Go 并发编程基础

    原文:Fundamentals of concurrent programming 译者:youngsterxyf 本文是一篇并发编程方面的入门文章,以Go语言编写示例代码,内容涵盖: 运行期并发线程 ...

  8. React和Vue特性和书写差异

    Vue均使用ES6语法,主要以单文件组件为例,写法上优先使用缩写. React使用TS语法. 生命周期 Vue React 入口&根实例 Vue const app = new Vue({ / ...

  9. TWebSocketClient

    TWebSocketClient 支持WEBSOCKET通讯协议的客户端控件. 连接WEBSOCKET SERVER的代码演示: WebSocketClient1.HostName := '88.19 ...

  10. UIProgressView 详解

    自定义progressView   包括背景图片和进度条的图片以及进度条的高度. //进度条 UIProgressView *aProgressView = [[UIProgressView allo ...