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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM