Backbone.js的集合詳解(下)

版權聲明：本文為部落客chszs的原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/chszs/article/details/24422533

《Backbone.js的集合詳解(下)》

作者：chszs，轉載需注明。部落格首頁：

http://blog.csdn.net/chszs

四、構造器與初始化

當我們建立一個集合時，我們可以傳遞模型的初始化數組。集合的比較器可以作為一個選項被加入。如果傳遞的比較器選項是false，那麼會阻止排序。如果我們定義了一個初始化函數，那麼此函數會在集合建立時被調用。下面說明了幾個選項，如果提供了，會直接加到集合上：模型和比較器。

var tabs = new TabSet([tab1, tab2, tab3]);
var spaces = new Backbone.Collection([], {
  model: Space
});           

五、toJSON

toJSO方法傳回集合中包含哈每個模型哈希屬性的數組。此方法通常用于對集合整體做序列化和持久化。

var song = new Backbone.Collection([
  {name: "Flatts"},
  {name: "OMC"},
  {name: "Jackson"}
]);
alert(JSON.stringify(song));
           

六、比較器Comparator

預設情況下，集合是不帶比較器的。如果我們定義了一個比較器，它可以用于讓集合維持某種排序。這意味着在添加模型時，模型會被插入到集合中适合的位置。比較器可以用sortBy定義，或以字元串的方式訓示排序的屬性。

sortBy比較器函數得到一個模型，并傳回一個數字或字元串。

sort比較器函數得到兩個模型，如果第一個模型先于第二個模型，那麼傳回-1；如果兩個模型同級，那麼傳回0；如果第二個模型先于第一個模型，那麼傳回1。

下面我們來看看例子：

var student  = Backbone.Model;
var students = new Backbone.Collection;
students.comparator = 'name';
students.add(new student({name: "name1", roll: 9}));
students.add(new student({name: "name2", roll: 5}));
students.add(new student({name: "name3", roll: 1}));
alert(students.pluck('roll'));
           

待比較器的集合不會自動重排序，即使我們修改了模型的屬性。是以我們應該在修改了模型屬性後估計會影響到排序時，調用排序。

七、排序

當集合中添加模型時，應強制集合進行重新排序。當集合添加模型時要禁用排序，可以傳遞{sort: false}參數。調用排序的觸發器會檢查此參數。

sortByType: function(type) {
  this.sortKey = type;
  this.sort();
}           

以及視圖函數：

sortThingsByColumn: function(event) {
  var type = event.currentTarget.classList[0]
  this.collections.things.sortByType(type)
  this.render()
}           

八、采摘

Pluck：從集合中的每個模型采摘一個屬性，這等同于從疊代器調用Map并傳回單一屬性。

var song = new Backbone.Collection([
  {name: "Flatts"},
  {name: "OMC"},
  {name: "Jackson"}
]);
var names = songs.pluck("name");
alert(JSON.stringify(names));           

九、Where

where：傳回集合中所有比對傳遞的屬性的模型的數組，使用了過濾器。

var song = new Backbone.Collection([
  {name: "Yes I Do",      artist: "Flatts"},
  {name: "How Bizarre",    artist: "How Bizarre"},
  {name: "What Hurts the Most",     artist: "Flatts"},
  ]);
var artists = song.where({artist: "Flatts"});
alert(artists.length);           

十、URL

在集合中設定URL屬性，會引用伺服器的位置。集合内的模型會使用此URL來構造自己的URL。

var Songs = Backbone.Collection.extend({
  url: '/songs'
});
var Songs = Backbone.Collection.extend({
  url: function() {
    return this.document.url() + '/songs';
  }
});           

十一、解析

Parse：在提取fetch時被Backbone調用，無論伺服器是否傳回集合的模型。此函數會傳遞原始的響應對象，他應該傳回被添加到集合的模型屬性的數組。預設的實作是空操作no-op。簡單的通過JSON響應傳遞，用先前存在的API覆寫此操作，或更好的命名空間響應。

var songs = Backbone.Collection.extend({
    parse: function(response) {
    return response.results;
  }
});           

十二、提取

Fetch：從伺服器提取集合預設的模型集，當取回後在集合中設定它們。此選項哈希接受success或錯誤回調，他傳遞（集合、響應、選項）三個參數。然後從伺服器傳回模型資料。它用于設定合并提取的模型。

Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};
var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();           

正如上面所看到的，僅僅是Backbone的集合就有那麼多的方法，掌握它們才能提高代碼的品質。