Backbone.js的集合詳解(下)

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

作者:chszs,轉載需註明。博客主頁:https://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的集合就有那麼多的方法,掌握它們才能提高代碼的質量。

發佈留言