zoukankan      html  css  js  c++  java
  • backbonejs中的集合篇(一)

    一:集合概念

      集合是多个模型,如果把模型model理解为表结构中的行,那么集合collection就是一张表,由多个行组成。我们经常需要用集合来组织和管理多个模型。

    二:创建集合

    1:扩展Backbone.Collection对象,指定为哪个模型创建集合,传参数model.

      var _collection = Backbone.Collection.extend({

        model: _model

      });

    2:创建集合实例,传模型数组参数来初始化; 现假定_model的dafault属性为(name,gender,age),实例对象为testModel

      var testObj = new _collection(

        [{name:'001',gender:'women',age:'23'}, {name:'002',gender:'man',age:'33'}, {name:'003',gender:'women',age:'28'}]);

    在集合内部,模型被存储在一个名为models的数组中

    除了数组参数来初始化,还可以用单个模型对象来初始化。

    如:model1 = new _model({name:'001',gender:'women',age:'23'}); model2 = new _model({name:'002',gender:'man',age:'33'});

      var testObj = new _collection([ model1, model2]);

    三:对集合的操作

    1:at()     通过索引获取集合中某个模型

      var model = testObj.at(2); //{name:'003',gender:'women',age:'28'}  

      model.get('name');   //003

    在集合内部,模型被存储在一个名为models的数组中,他的第一个元素索引下标为0

    2:indexOf()    获取模型的索引值        该方法从Underscore.js中继承过来

     如上面的model,     testObj.indexOf(model);    //2

    3:clone()     获取一个模型对象的深拷贝。

       (深拷贝:用clone方法,这样克隆的模型对象与实际在集合中存储的对象不是同一个对象,对其中一个值改变不影响其他对象)

     (浅拷贝:用at()索引值获取的模型对象与集合中的对象是同一个对象,相互操作会有影响)

      如: another = testObj.at(2).clone();    another.set('name':'test');

        another.get('name'); //test        testObj.at(2).get('name');   //002

    3:length()  获取集合长度            len = testObj.length        //3                     model = testObj.at(len-1)

    4:add()      添加新模型到集合末端

      testObj.add({name:'004',age:'30',denger:'women'})  加一个模型,

      testObj.add([{name:'005',age:'30',denger:'women'},{name:'006',age:'30',denger:'women'}])  加模型数组

    也可以加已有的模型对象

    注: add方法保证了重复的模型不会被添加到集合,不重复的才会添加到内部数组models中

    5:{at:index}   在指定位置上添加模型

      testObj.add({name:'000',age:'30',denger:'women'}, {at:0})       此时 testObj.at(0).get('name') 输出000

    6:remove()    移除模型,参数可以为一个单独的值也可以是数组,可传入模型的id,cid,或者模型对象

       如  testObj.remove(model)        testObj.remove([c1,c2])

    调用remove时, 会从models中删除模型,并且模型与集合间的引用关系都会删除

    7:reset()     删除/清空集合中的所有模型,并添加新模型

      如:testObj.reset([{name:'A',age:3,gender:'boy'},{name:'B',age:2,:gender:'gril'}]);

    8:以栈和队列方式使用集合 push pop unshift shift

      testObj.push(model)

    9:排序     comparator回调函数接受一个模型对象作为其唯一的参数,返回要排序的属性。

      a:  testObj.comparator = function(testModel){ return testModel.get('age');}  //集合会根据age来排序

      b:  testObj.sort();   //调用sort手动出发排序

    当调用comparator回调函数后,只要后续有插入的新模型,该回调都会被调用,将新模型插入到适合的位置。

    10:where()  对集合中的模型进行过滤,可以传入一个或多个搜索条件

       如: var result= testObj.where({name:'A'});        此时result仅是内部模型数组models的一数组,要使用它还得new一个对象数组

        var resultcollection = new _collection(result)   //{name:'A',age:3,gender:'boy'}

     11:遍历集合 each()

      str = '';

      testObj.each(function(model,index,list){

        str += model.get('name');}               //AB

    参数: model :当前模型; index:当前模型在集合中的下标;  list:整个模型数组

     12:every()  检测满足所有条件

      person = testObj.every(function(model){ return model.get('age')>18;})  //false  有一个不满足条件就返回false

    13: some() 有一个满足条件就返回true

    14: pluck()  返回集合中某个属性值的数组 如:testObj.pluck('name')  //['A', 'B']

    15:map()  对各模型属性值进行计算,返回数组  testObj.map(function(model){return model.get('name')+' '+model.get('gender')})  // ['A boy', 'B gril']

    16:reduce()      把个模型归并成一个单一的值  testObj.reduce(function(memo,model){return memo+model.get('age')},0)    //5

    17:chain()  链式操作,可以通过它在调用一个方法完毕后再其结果上通过‘.’来调用另一个方法。

      如  假设collection的models为[{num:22,count:10,name:'aa'},{num:1,count:2,name:'test'}]

       testObj.chain().map(function(model){

        return model.get('num')+model.get('count');   //['32', '3']

       }).reduce(function(memo,val){

        return memo + val;}).value();     //35

      

  • 相关阅读:
    es5预览本地文件、es6练习代码演示案例
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 838 推多米诺(暴力模拟)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 837 新21点(DP)
    Java实现 LeetCode 836 矩形重叠(暴力)
    Subversion under Linux [Reprint]
    Subversion how[Reprint]
  • 原文地址:https://www.cnblogs.com/Joans/p/3921680.html
Copyright © 2011-2022 走看看