上一篇，我們講述了Backbone模型的入門(mén)學(xué)習(xí)艘绍，本篇開(kāi)始學(xué)習(xí)Backbone集合魂贬。
Backbone集合是模型的有序組合，通過(guò)拓展Backbone.Collection對(duì)象來(lái)創(chuàng)建集合：
var app = app || {};
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
name: '最近聯(lián)系人',
status: 'active'
}密浑，
idAttribute: 'idx'
});
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel
});
app.menu = new app.MenuModel({
status: 'inactive',
idx: '001'
});
app.menus = new app.MenuCollection([app.menu]);
console.log(app.menus.length); //1
在創(chuàng)建集合時(shí)，通過(guò)model屬性設(shè)置集合中的模型類型粗井，實(shí)例化集合時(shí)尔破，可以傳入對(duì)象或數(shù)組街图，它們將被自動(dòng)轉(zhuǎn)換為通過(guò)model設(shè)置的模型類型。
初始化
在創(chuàng)建集合時(shí)懒构，可以設(shè)置initialize函數(shù)餐济，在實(shí)例化集合時(shí)，將自動(dòng)調(diào)用執(zhí)行initialize函數(shù)：
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel,
initialize: function() {
console.log('集合初始化成功');
}
});
app.menus = new app.MenuCollection([app.menu]);
打印值如下：
集合屬性方法
-
models
此屬性返回集合中模型數(shù)組：
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', status: 'inactive' } }); app.MenuCollection = Backbone.Collection.extend({ model: app.MenuModel, initialize: function() { console.log('集合初始化成功'); } }); var menus = [ { id: 1, name: '最近會(huì)話', status: 'active' }, { id: 2, name: '通訊錄', status: 'inactive' } ] app.menus = new app.MenuCollection(menus); console.log(app.menus.models.length); //2 -
toJSON()
Collection.toJSON()方法返回集合中所有模型attributes對(duì)象拷貝副本的JSON格式對(duì)象數(shù)組：
console.log(app.menus.toJSON());Collection.toJSON()
集合與模型
Backbone.Collection對(duì)象允許我們通過(guò)多種方法對(duì)模型進(jìn)行管理胆剧。
添加/移除模型
集合創(chuàng)建以后絮姆，可以使用add()和remove()方法添加或移除集合中的模型：
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
status: 'inactive'
}
});
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel,
initialize: function() {
console.log('集合初始化成功');
}
});
var menu1 = new app.MenuModel({
name: '最近會(huì)話',
status: 'active'
});
var menu2 = new app.MenuModel({
name: '通訊錄',
status: 'inactive'
});
var menu3 = new app..MenuModel({
name: '公告',
status: 'inactive'
});
app.menus = new app.MenuCollection([menu1, menu2]);
console.log(app.menus);
app.menus打印值如下：
app.menus.add(menu3);
console.log(app.menus.length);//3
app.menus.remove(menu2);
console.log(app.menus.length);//2
檢索模型
-
get()
調(diào)用collection.get()方法，傳入一個(gè)id或者cid從集合中檢索一個(gè)模型：
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', status: 'inactive' } }); app.MenuCollection = Backbone.Collection.extend({ model: app.MenuModel, initialize: function() { console.log('集合初始化成功'); } }); var menus = [ { id: 1, name: '最近會(huì)話', status: 'active' }, { id: 2, name: '通訊錄', status: 'inactive' } ] app.menus = new app.MenuCollection(menus); var a = app.menus.get(1); var b = app.menus.get('c2'); console.log(a === b); //true關(guān)于模型的id秩霍、cid滚朵、idAttribute屬性可以參考上一篇文章Backbone入門(mén)之集合
-
at()
調(diào)用collection.at()方法，傳入模型在集合中的索引值前域，at始終根據(jù)模型在插入集合時(shí)的索引返回值：
var a = app.menus.get(1); var c = app.menus.at(0); console.log(a === c); //true -
where()
調(diào)用collection.where()方法，傳入模型屬性韵吨，返回符合的模型數(shù)組：
var d = app.menus.where({name: '最近會(huì)話'}); console.log(d);打印值如下：
where -
findWhere()
findWhere()方法與where()方法調(diào)用方式一樣匿垄，只是findWhere()方法返回匹配傳入屬性的第一個(gè)模型，而不是返回一個(gè)模型數(shù)組：
var d = app.menus.where({name: '最近會(huì)話'}); console.log(d);
重置刷新集合
-
set()
Backbone不僅支持添加或移除模型归粉，還提供一次性更新整個(gè)集合：調(diào)用Collection.set()方法椿疗，接收一個(gè)模型數(shù)組，將執(zhí)行更新集合所必要的添加糠悼、移除和更新操作届榄。
如果列表中的一個(gè)模型尚不在集合中，那么它將被添加; 如果模型已經(jīng)在集合中倔喂，其屬性將被合并; 并且如果集合包含不存在于列表中的任何模型铝条，他們將被刪除。 以上所有將觸發(fā)相應(yīng)的"add", "remove", 和 "change"事件席噩。 返回集合中的模型班缰。另外 可以設(shè)置選項(xiàng)：{add: false}, {remove: false}, 或 {merge: false}，將相應(yīng)操作禁用悼枢，實(shí)現(xiàn)自定義行為埠忘。
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', status: 'inactive' } }); app.MenuCollection = Backbone.Collection.extend({ model: app.MenuModel, initialize: function() { console.log('集合初始化成功'); } }); var menus = [ { id: 1, name: '最近會(huì)話', status: 'active' }, { id: 2, name: '通訊錄', status: 'inactive' } ] app.menus = new app.MenuCollection(menus); app.menus.set([ {id:1, name: '最近聊天'}, {id:3, name: '公告'} ]); console.log(app.menus.length); //2 console.log(app.menus);打印值如下：
刷新集合app.menus = new app.MenuCollection(menus); app.menus.set([ {id:1, name: '最近聊天'}, {id:3, name: '公告'} ], {remove: false}); console.log(app.menus.length); //3 -
reset()
調(diào)用Collection.reset()方法，可以重置整個(gè)集合：
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', status: 'inactive' } }); app.MenuCollection = Backbone.Collection.extend({ model: app.MenuModel, initialize: function() { console.log('集合初始化成功'); this.on('reset', function(cols, options) { console.log(cols, options.previousModels); }); } }); var menus = [ { id: 1, name: '最近會(huì)話', status: 'active' }, { id: 2, name: '通訊錄', status: 'inactive' } ] app.menus = new app.MenuCollection(menus); app.menus.reset([ {id:1, name: '最近聊天'} ]); console.log(app.menus.length); //1打印值如下：
Collection.reset()調(diào)用Collection.reset()方法不會(huì)觸發(fā)add和remove事件馒索，但會(huì)觸發(fā)reset事件莹妒，我們可以通過(guò)傳入空參數(shù)來(lái)清空集合；監(jiān)聽(tīng)reset事件時(shí)可以從options.previousModels訪問(wèn)之前的模型數(shù)組绰上。
事件監(jiān)聽(tīng)
集合是模型的有序組合旨怠，在集合中添加或移除模型時(shí)會(huì)觸發(fā)add或remove事件，我們可以監(jiān)聽(tīng)這些事件渔期，進(jìn)行相應(yīng)數(shù)據(jù)邏輯處理运吓；同時(shí)渴邦，可以在集合的任意模型屬性上綁定change事件，監(jiān)聽(tīng)模型屬性的變化拘哨。
一般谋梭，事件監(jiān)聽(tīng)在集合初始化時(shí)綁定，第一個(gè)參數(shù)為監(jiān)聽(tīng)事件類型倦青，第二個(gè)參數(shù)為監(jiān)聽(tīng)回調(diào)瓮床，第三個(gè)參數(shù)為回調(diào)的上下文環(huán)境(可選)，通常傳入指向當(dāng)前集合的this产镐。
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
status: 'inactive'
}
});
app.MenuCollection = Backbone.Collection.extend({
model: app.MenuModel,
initialize: function() {
console.log('集合初始化成功');
this.on('reset', function(cols, options) {
console.log('重置集合');
}, this);
this.on('add', function(model) {
console.log('添加模型隘庄，cid： ' + model.cid);
}, this);
this.on('change', function(model) {
console.log('模型屬性改變?yōu)? ' + model.get(name'));
});
this.on('change:name', function(model) {
console.log('模型name屬性改變?yōu)? ' + model.get('name'));
});
this.on('remove', function(model) {
console.log('移除模型: ' + model.cid);
});
}
});
var menus = [
{
id: 1,
name: '最近會(huì)話',
status: 'active'
},
{
id: 2,
name: '通訊錄',
status: 'inactive'
}
]
app.menus = new app.MenuCollection(menus);
app.menus.set([
{id:1, name: '最近聊天'},
{id:3, name: '公告'}
]);
app.menus.reset([
{id:1, name: '最近聊天'}
]);
//logs:
//模型name屬性改變?yōu)? 最近聊天
//模型屬性改變?yōu)? 最近聊天
//移除模型: c3
//添加模型，cid： c4
//重置集合
Backbone事件除了上文的on()方法癣亚，還可以使用once()方法丑掺，與jQuery的once類似，監(jiān)聽(tīng)回調(diào)只執(zhí)行一次述雾。
關(guān)于Backbone.Collection集合的主要基礎(chǔ)內(nèi)容就闡述到這里街州，下一篇繼續(xù)學(xué)習(xí)Backbone的視圖（Backbone.View）。
