• Backbone.js 使用 Collection


    在前面我们的 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]。

  • 相关阅读:
    iptables防火墙-SNAT和DNAT
    exists & in
    系统演化之路
    promethue 采集traefik指标列表
    Grafana中变量
    Wireshark抓包
    http协议格式 基于ABNF语义定义
    Prometheus 管理常用知识点
    python时间转换
    通过salt-api获取minion的ip地址
  • 原文地址:https://www.cnblogs.com/leejersey/p/4307313.html
Copyright © 2020-2023  润新知