2014/08/06 – Backbonejs

浏览数：34 / 时间：2015年06月09日

[来自：Backbone.js 开发秘笈第3章]

Collection API

(function ($) {
    //define -----------------------------
    var ModelD = Backbone.Model.extend({
        defaults: {
            ID: 0,
            Name: ‘‘
        },
        idAttribute: ‘ID‘
    });
    //定义集合对象
    /* 在其内部，模型被存储在一个名为 models 的数组当中 */
    var CollectionD = Backbone.Collection.extend({
        model: ModelD
    });

    //instance ---------------------------
    var modelInstance = new ModelD({
        ID: 1,
        Name: ‘James‘
    });
    //实例化集合对象
    var collectionInstance = new CollectionD([
        { ID: 2, Name: ‘Yoyo‘ },
        modelInstance
    ]);

    //apply -----------------------------
    //获取索引处的集合项
    var model2 = collectionInstance.at(1);
    //获取模型索引值
    var model2Index = collectionInstance.indexOf(modelInstance);
    //获取集合长度
    var count = collectionInstance.length;
    //获取指定 ID 的模型
    /* 通过其内部 _byId 键值对集合进行查询 */
    var model1 = collectionInstance.get(2);
    //添加模型 [重复不会添加到集合中，触发 add 事件]
    collectionInstance.add([{
        ID: 3,
        Name: ‘Pepe‘
    }], {
        at: 0//插入点
    });
    //删除模型
    collectionInstance.remove([3]);
    //重置模型
    collectionInstance.reset([{
        ID: 4,
        Name: ‘Ramos‘
    }]);
    //以队列或栈的形式操作
    /*
        .push()
        .pop()
        .unshift()
        .shift()
    */
    //排序
    /* 注：定义 comparator 回调函数后，插入值后会被调用来确保顺序 */
    collectionInstance.comparator = function (model) {
        return model.get(‘Name‘);
    };
    //或
    /*
    collectionInstance.comparator = function(m1, m2) {
        return m1.get(‘ID‘) - m2.get(‘ID‘);
    };
    */
    /* 模型被更新后，需手动调用 sort() 进行排序或绑定到 change 事件 */
    collectionInstance.sort();
    //过滤集合
    var collection2 = collectionInstance.where({ Name: ‘Pepe‘ });
    //遍历集合
    collectionInstance.each(function (mode, index, list) {

    });
    //是否都满足条件
    var isMultiple = collectionInstance.every(function (model) {
        return model.get(‘ID‘) > 0;
    });
    //是否任意满足条件
    var isOther = collectionInstance.some(function (model) {
        return mode.get(‘ID‘) === 0;
    });
    //获取集合指定属性的值集合
    var names = collectionInstance.pluck(‘Name‘);
    //获取集合特定的值集合
    var plusColl = collectionInstance.map(function (model) {
        return model.get(‘ID‘) + model.get(‘Name‘);
    });
    //获取归并单一值
    var plusID = collectionInstance.reduce(function (plusValue, model) {
        return (plusValue || 0) + model.get(‘ID‘);
    }, 0/*初始值*/);
    //集合的链式操作 /* chain() */
    var plusID2 = collectionInstance.chain().pluck(‘ID‘).reduce(function (plusValue, value) {
        return plusValue + value;
    }, 0).value();
})(jQuery);

插件扩展：

1. NoSQL 查询 more api　　

(function ($) {
    //依赖 backbone.query.js
    //https://github.com/davidgtonge/backbone_query

    //define --------------------------------------
    var ModelQ = Backbone.Model.extend({
        defaults: {
            id: 0,
            name: ‘‘,
            age: 0,
            rank: 1001
        }
    });
    //通过其基类进行插件扩展
    var CollectionQ = Backbone.QueryCollection.extend({
        model: ModelQ
    });

    //instance ----------------------------------------
    var collectionInstance = new CollectionQ([
        { id: 1, name: ‘cxls‘, age: 33, rank: 1999 },
        { id: 2, name: ‘yln‘, age: 22, rank: 1003 },
        { id: 3, name: ‘pp‘, age: 31, rank: 1899 },
        { id: 1, name: ‘lms‘, age: 28, rank: 1899 }
    ]);
    //apply --------------------------------------------
    //查询
    var qCollection = collectionInstance.query({ name: ‘cxls‘ });
    /* 操作符 */
    /*
        $equal  ===
        $ne     !==
        $in     包含所有可能的数组的值     [1899,1999]
        $nin    !$in
        $exists 是否存在    true or flase
        $has    是否存在    true or flase

        $and
        $or
        $nor    !$or
        $not    !$and
    */
    qCollection = collectionInstance.query({ rank: { $equal: 1299 } });
    qCollection = collectionInstance.query({ $and: { age: 31, rank: 1299 } });
    //排序
    var oCollection = collectionInstance.query({ sortBy: ‘name‘, order: ‘desc‘/* 默认 asc */ });
    //分页
    var pCollection = collectionInstance.query({ rank: 1999 }, {
        limit: 10/*返回结果数组的前 N 个元素 (必填) */,
        offset: 1/* 跳过前 N 个结果项 */,
        page: 2,/* 指定结果页 */
        cache: true/* 是否缓存数据 默认 false */
    });
    /* 注：缓存后如有更新，则许手动同步缓存，可以通过调用 resetQueryCache() 方法 */

})(jQuery);

View Code

2. 集合存储不同类型模型

(function ($) {
    //依赖 backbone.chosen.js
    //https://github.com/asciidisco/backbone.Chosen

    //define --------------------------------------
    var Model1 = Backbone.Model.extend({
        getFullName: function () {
            return this.get(‘firstName‘) + this.get(‘lastName‘);
        }
    });
    var Model2 = Backbone.Model.extend({
        getFullName: function () {
            return this.get(‘name1‘) + this.get(‘name2‘);
        }
    });

    /* Backbone.chosen 重写 _prepareModel 方法，可根据映射(map)来选择正确的模型对象 */

    var CollectionMultiple = Backbone.Collection.extend({
        model: {
            chosen: {//定义多类型    [还可以使用函数来对模型进行映射]
                attr: ‘type‘,//模型中的类型属性名称
                defaults: Model1,//默认类型
                map: {//类型名对应模型
                    model1: Model1,
                    model2: Model2
                }
            }
        }
    });

    //instance ------------------------
    var collectionM = new CollectionMultiple([
        { firstName: ‘Yo‘, lastName: ‘Yo‘, type: ‘model1‘ },
        { name1: ‘C‘, name2: ‘Yo‘, Ronaldo: ‘model2‘ }
    ]);

})(jQuery);

View Code

3. 一对多关联的关系

(function ($) {
    //依赖 backbone.relational.js
    //https://github.com/pauluithol/backbone-relational

    //define ----------------------------------------------
    var EmployeeModel = Backbone.RelationalModel.extend();
    var EmployeeCollection = Backbone.Collection.extend({
        model: EmployeeModel
    });
    var SuperviserModel = Backbone.RelationalModel.extend({
        relations: [{
            type: Backbone.HasMany,//一对多类型枚举
            key: ‘employees‘,
            relatedModel: EmployeeModel,
            collectionType: EmployeeCollection,//集合类型
            reverRelation: {
                key: ‘superviser‘
            },
            includeInJSON: [‘id‘, ‘name‘]//可控制导出到 JSON 格式的属性
        }]
    });

    //instance ---------------------------------------
    var superviserInstance = new SuperviserModel({
        id: 1,
        name: ‘yoyo‘,
        employees: [
            { id: 2, name: ‘abc‘ },
            { id: 3, name: ‘edf‘ }
        ]
    });

    //apply ------------------------------------------
    var employee1Name = superviserInstance.get(‘employees‘).at(0).get(‘name‘);
    var supName = superviserInstance.get(‘employees‘).at(0).get(‘superviser‘).get(‘name‘);
    //添加对象或关系   [自动关联一对多关系]
    superviserInstance.get(‘employees‘).add({
        id: 5,
        name: ‘xyz‘
    });

    var newEmployee = new EmployeeModel({
        id: 4,
        name: ‘ghi‘,
        superviser: superviserInstance
    });
    //获取 JSON 形式对象
    var superJSON = superviserInstance.toJSON();
})(jQuery);