首页 > 代码库 > 2014/08/06 – Backbonejs
2014/08/06 – Backbonejs
[来自：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);
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);
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);
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。