Backbone.js中的集合詳解
Backbone.js的集合只是一個(gè)簡(jiǎn)單的有序集的模型。通過(guò)適應(yīng)模型和集合，我們可以避免數(shù)據(jù)處理邏輯放到了我們的視圖層。此外，模型和集合還提供了便利的與后端一起工作的方法，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，可以自動(dòng)化地標(biāo)記Backbone.js視圖。這樣，它可以用于如下的情況：
Model: Animal, Collection: Zoo
通常情況下你的集合只適應(yīng)一種模型，但模型本身并不局限于集合的類型。
Model: person, Collection: Office
Model: person, Collection: Home
下面是常見的模型/集合的例子：
var Music = Backbone.Model.extend({
initialize: function(){
console.log("Welcome to the music world");
}
});
var Album = Backbone.Collection.extend({
model: Music
});
上面的代碼告訴我們?nèi)绾蝿?chuàng)建集合。但是它沒有告訴我們用數(shù)據(jù)操縱集合的過(guò)程。因此，讓我們探索這個(gè)過(guò)程：
var Music = Backbone.Model.extend({
defaults: {
name: "Not specified",
artist: "Not specified"
},
initialize: function(){
console.log("Welcome to the music world "); }
});
var Album = Backbone.Collection.extend({
model: Music
});
var music1 = new Music ({ id: 1 ,name: "How Bizarre", artist: "OMC" });
var music 2 = new Music ({id: 2, name: "What Hurts the Most", artist: “Rascal Flatts" });
var myAlbum = new Album([music 1, music 2]);
console.log( myAlbum.models );
下面我們來(lái)看看Backbone.js的集合和其它組件的關(guān)系：
一、添加模型到集合
正如我們所知的那樣，集合是模型的集合。因此，我們可以在集合上添加模型。要添加模型到集合，我們可以使用add方法。我們還可以添加模型到集合的開始——通過(guò)使用unshift方法。
var music3 = new Music({ id: 3, name: "Yes I Do",artist:“Rascal Flatts" });
Music.add(music3);
console.log('New Song Added');
console.log(JSON.stringify(Music));
二、從集合中移除模型
很多時(shí)候，我們會(huì)有從集合中移除一些指定的數(shù)據(jù)這樣的需求。要從集合中移除模型，我們需要提供模型的id。如果我們想用一個(gè)完整的新數(shù)據(jù)集替換原集合，我們可以使用reset方法。
Music.remove(1);
console.log('How Bizarre removed...');
console.log(JSON.stringify(Music));
三、Get和Set
如果我們需要從代碼其它地方的集合中獲取一個(gè)值，那么可以直接使用get方法。此時(shí)，我們向帶檢索的模型傳遞ID值。
console.log(JSON.stringify(Music.get(2)));
集合的set方法有一個(gè)有趣的實(shí)現(xiàn)。set方法通過(guò)傳遞模型列表，執(zhí)行集合的“智能”更新。如果列表中的模型還不在集合中，那么會(huì)添加到集合。如果模型已經(jīng)在集合中，那么它的屬性會(huì)被合并。如果集合包含了不屬于列表的任意模型，那么這項(xiàng)模型會(huì)被移除。
var Music = Backbone.Model.extend({
// This attribute should be set as a default
defaults: {
Name: ''
},
// Set the id attribute so that the collection
idAttribute: 'id'
});
var song = Backbone.Collection.extend({
model: Music
});
var models = [{
Name: 'OMC',
id: 1
}, {
Name: 'Flatts',
id: 2
}];
var collection = new song(models);
collection.bind('add', function (model) {
alert('addb')
});
collection.bind('remove', function () {
alert('add')
});
models = [{
Name: 'OMC',
id :1
}, {
Name: 'Flatts',
id: 2
}, {
Name: ' Jackson ',
id: 3
}];
collection.add(models);
});
正如我們?cè)谏厦嫠吹降哪菢樱虑拔覀円呀?jīng)有2個(gè)模型了，當(dāng)我們添加第3個(gè)模型時(shí)，早先的模型保持不變。
四、構(gòu)造器與初始化
當(dāng)我們創(chuàng)建一個(gè)集合時(shí)，我們可以傳遞模型的初始化數(shù)組。集合的比較器可以作為一個(gè)選項(xiàng)被加入。如果傳遞的比較器選項(xiàng)是false，那么會(huì)阻止排序。如果我們定義了一個(gè)初始化函數(shù)，那么此函數(shù)會(huì)在集合創(chuàng)建時(shí)被調(diào)用。下面說(shuō)明了幾個(gè)選項(xiàng)，如果提供了，會(huì)直接加到集合上：模型和比較器。
var tabs = new TabSet([tab1, tab2, tab3]);
var spaces = new Backbone.Collection([], {
model: Space
});
五、toJSON
toJSO方法返回集合中包含哈每個(gè)模型哈希屬性的數(shù)組。此方法通常用于對(duì)集合整體做序列化和持久化。
var song = new Backbone.Collection([
{name: "Flatts"},
{name: "OMC"},
{name: "Jackson"}
]);
alert(JSON.stringify(song));
六、比較器Comparator
默認(rèn)情況下，集合是不帶比較器的。如果我們定義了一個(gè)比較器，它可以用于讓集合維持某種排序。這意味著在添加模型時(shí)，模型會(huì)被插入到集合中適合的位置。比較器可以用sortBy定義，或以字符串的方式指示排序的屬性。
sortBy比較器函數(shù)得到一個(gè)模型，并返回一個(gè)數(shù)字或字符串。
sort比較器函數(shù)得到兩個(gè)模型，如果第一個(gè)模型先于第二個(gè)模型，那么返回-1；如果兩個(gè)模型同級(jí)，那么返回0；如果第二個(gè)模型先于第一個(gè)模型，那么返回1。
下面我們來(lái)看看例子：
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'));
待比較器的集合不會(huì)自動(dòng)重排序，即使我們修改了模型的屬性。因此我們應(yīng)該在修改了模型屬性后估計(jì)會(huì)影響到排序時(shí)，調(diào)用排序。
七、排序
當(dāng)集合中添加模型時(shí)，應(yīng)強(qiáng)制集合進(jìn)行重新排序。當(dāng)集合添加模型時(shí)要禁用排序，可以傳遞{sort: false}參數(shù)。調(diào)用排序的觸發(fā)器會(huì)檢查此參數(shù)。
sortByType: function(type) {
this.sortKey = type;
this.sort();
}
以及視圖函數(shù)：
sortThingsByColumn: function(event) {
var type = event.currentTarget.classList[0]
this.collections.things.sortByType(type)
this.render()
}
八、采摘
Pluck：從集合中的每個(gè)模型采摘一個(gè)屬性，這等同于從迭代器調(diào)用Map并返回單一屬性。
var song = new Backbone.Collection([
{name: "Flatts"},
{name: "OMC"},
{name: "Jackson"}
]);
var names = songs.pluck("name");
alert(JSON.stringify(names));
九、Where
where：返回集合中所有匹配傳遞的屬性的模型的數(shù)組，使用了過(guò)濾器。
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
在集合中設(shè)置URL屬性，會(huì)引用服務(wù)器的位置。集合內(nèi)的模型會(huì)使用此URL來(lái)構(gòu)造自己的URL。
var Songs = Backbone.Collection.extend({
url: '/songs'
});
var Songs = Backbone.Collection.extend({
url: function() {
return this.document.url() + '/songs';
}
});
十一、解析
Parse：在提取fetch時(shí)被Backbone調(diào)用，無(wú)論服務(wù)器是否返回集合的模型。此函數(shù)會(huì)傳遞原始的響應(yīng)對(duì)象，他應(yīng)該返回被添加到集合的模型屬性的數(shù)組。默認(rèn)的實(shí)現(xiàn)是空操作no-op。簡(jiǎn)單的通過(guò)JSON響應(yīng)傳遞，用先前存在的API覆蓋此操作，或更好的命名空間響應(yīng)。
var songs = Backbone.Collection.extend({
parse: function(response) {
return response.results;
}
});
十二、提取
Fetch：從服務(wù)器提取集合默認(rèn)的模型集，當(dāng)取回后在集合中設(shè)置它們。此選項(xiàng)哈希接受success或錯(cuò)誤回調(diào)，他傳遞（集合、響應(yīng)、選項(xiàng)）三個(gè)參數(shù)。然后從服務(wù)器返回模型數(shù)據(jù)。它用于設(shè)置合并提取的模型。
Backbone.sync = function(method, model) {
alert(method + ": " + model.url);
};
var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();
正如上面所看到的，僅僅是Backbone的集合就有那么多的方法，掌握它們才能提高代碼的質(zhì)量。
- js取兩個(gè)數(shù)組的交集|差集|并集|補(bǔ)集|去重示例代碼
- JavaScript獲取兩個(gè)數(shù)組交集的方法
- JavaScript獲取多個(gè)數(shù)組的交集簡(jiǎn)單實(shí)例
- JS數(shù)組交集、并集、差集的示例代碼
- Javascript實(shí)現(xiàn)的Map集合工具類完整實(shí)例
- javascript 實(shí)現(xiàn)map集合
- jsp頁(yè)面循環(huán)集合操作整理
- js數(shù)組去重的常用方法總結(jié)
- JS實(shí)現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
- JS實(shí)現(xiàn)的集合去重，交集，并集，差集功能示例
相關(guān)文章
Backbone簡(jiǎn)單、靈活，無(wú)論是富JS應(yīng)用還是企業(yè)網(wǎng)站都用得上，相比React針對(duì)View和單向數(shù)據(jù)流的設(shè)計(jì)，Backbone更能體現(xiàn)MVC的思路，所以針對(duì)它寫一篇入門范例,需要的朋友可以參考下2017-10-10
backbone簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
輕量級(jí)javascript 框架Backbone使用指南
Backbone.js框架中簡(jiǎn)單的View視圖編寫學(xué)習(xí)筆記
BackBone及其實(shí)例探究_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
實(shí)例講解JavaScript的Backbone.js框架中的View視圖
深入解析JavaScript框架Backbone.js中的事件機(jī)制