Backbone模型包含應(yīng)用程序的數(shù)據(jù)和與數(shù)據(jù)相關(guān)的邏輯處理,我們通過拓展Backbone.Model對象來創(chuàng)建模型:
var app = app || {};
app.MenuModel = Backbone.Model.extend({});
構(gòu)造函數(shù)初始化
當(dāng)創(chuàng)建一個模型的新實例時吗冤,其構(gòu)造函數(shù)牌捷,即initialize()方法會被調(diào)用:
app.MenuModel = Backbone.Model.extend({
initialize: function() {
console.log('Initialize the Model.');
}
});
app. menu = new app.MenuModel();
默認值
創(chuàng)建Backbone模型時,Backbone允許我們?yōu)槟P驮O(shè)置一組默認值拓轻,通過defaults屬性即可設(shè)置;當(dāng)實例化模型時,可傳入一個參數(shù)對象仪壮,此對象即為模型的數(shù)據(jù),傳入?yún)?shù)值將覆蓋所設(shè)置的默認值胳徽。
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
name: '最近會話',
status: 'active'
}
});
app.menu = new app.MenuModel({
status: 'inactive'
});
console.log(JSON.parse(app.menu));
//{"title": "this is a menu", "name": "最近會話", "status": "inactive"}
屬性操作
-
Model.get()
Model.get()方法用于訪問模型的屬性:
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', name: '最近會話', status: 'active' } }); app.menu = new app.MenuModel({ status: 'inactive' }); console.log(app.menu.get('status'));//inactive
-
Model.set()
Model.set()方法用于設(shè)置模型的一個或多個屬性值:
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', name: '最近會話', status: 'active' } }); app.menu = new app.MenuModel({ status: 'inactive' }); console.log(app.menu.get('status'));//inactive app.menu.set({ status: 'active', title: 'menu' }); console.log(app.menu.get('status'));//active
-
Model.attributes
Backbone模型的attributes屬性积锅,是包含模型狀態(tài)的一個內(nèi)部散列表爽彤,使用Model.attributes可直接訪問該模型所有數(shù)據(jù),其通常以服務(wù)器返回的JSON對象數(shù)據(jù)形式存在:
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', name: '最近會話', status: 'active' } }); app.menu = new app.MenuModel({ status: 'inactive' }); console.log(app.menu.attributes); //Object {status: "inactive", title: "this is a menu", name: "最近會話"}
注:強烈建議使用set方法更新模型attributes對象而不是直接修改attributes對象缚陷。
-
Model.toJSON()
Model.toJSON()方法返回模型attributes對象拷貝副本的JSON格式對象:
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', name: '最近會話', status: 'active' } }); app.menu = new app.MenuModel({ status: 'inactive' }); console.log(app.menu.toJSON()); //Object {status: "inactive", title: "this is a menu", name: "最近會話"} console.log(JSON.stringify(app.menu)); //{"status":"inactive","title":"this is a menu","name":"最近會話"}
注:當(dāng)給JSON.stringify()傳遞帶toJSON()方法的對象時适篙,其處理的是該對象執(zhí)行toJSON()方法后返回的值,而不是原始傳入的對象箫爷,如:
var a = {
data: {
name: '驚鴻',
title: 'sj'
},
toJSON: function() {
return 'sds';
}
};
console.log(JSON.stringify(a));//"sds"
模型id與cid
id
id是模型的特殊屬性嚷节,可以是任意字符串(整型 id 或 UUID)。在屬性中設(shè)置的 id 會被直接拷貝到model屬性上虎锚。 也可以在集合(collections)中通過 id 獲取特定model硫痰。
-
idAttribute
模型的唯一標識符,被儲存在 id 屬性下翁都,可以通過設(shè)置Model的idAttribute與一個唯一值key對應(yīng)碍论,從而形成一個從該key到模型id的一個映射。
app.MenuModel = Backbone.Model.extend({ defaults: { title: 'this is a menu', name: '最近會話', status: 'active' }, idAttribute: 'idx', //形成從idx到id的映射 initialize: function() { } }); app.menu = new app.MenuModel({ idx: '001' }); console.log(app.menu.id);//001
cid
cid柄慰,即客戶端id鳍悠,是model創(chuàng)建時自動產(chǎn)生的唯一標識符。 客戶端id在model尚未保存到服務(wù)器之前便存在坐搔,此時model可能仍不具有最終的id藏研,但已經(jīng)需要在用戶界面可見。
console.log(app.menu.cid);//c1或其他
模型變化監(jiān)聽
通過監(jiān)聽模型上change事件概行,可以監(jiān)測到模型的變化蠢挡,既可以監(jiān)聽整個模型的改變,也可以監(jiān)聽模型單個屬性的變化凳忙;通常在模型initialize()函數(shù)中添加監(jiān)聽器:
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
name: '最近會話',
status: 'active'
},
initialize: function() {
//監(jiān)聽模型變化
this.on('change', function(model) {
console.log(model);
console.log('模型已改變');
});
//監(jiān)聽模型單個屬性變化
this.on('change:name', function(model) {
console.log('菜單名已修改');
});
}
});
app.menu = new app.MenuModel();
app.menu.set({
title: 'menu',
status: 'inactive'
});
console.log(app.menu.get('title'));//menu
console.log(app.menu.get('status'));//inactive
app.menu.set({
name: '常用聯(lián)系人',
});
console.log(app.menu.get('name'));//常用聯(lián)系人
驗證
調(diào)用Model.validate()方法進行模型驗證业踏,在設(shè)置屬性值之前對其進行驗證,默認涧卵,在使用save()方法或調(diào)用set()方法時設(shè)置了{validate: true}參數(shù)以持久化數(shù)據(jù)模型均會觸發(fā)驗證勤家;驗證通過將不返回值,驗證失敗將觸發(fā)"invalid"事件柳恐, 此方法返回一個錯誤值伐脖,并用此方法返回的值設(shè)置模型上的validationError屬性,同時模型上的屬性值不會持久化到服務(wù)器:
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
//name: '最近會話',
status: 'active'
},
validate: function(attr) {
if (attr.name == undefined ) {
//返回錯誤值
return '菜單名不能為空';
}
},
initialize: function() {
//監(jiān)聽invalid事件
this.on('invalid', function(model, err) {
console.log('title: ' + model.get('title'), '; error: ' + err);
});
}
});
app.menu = new app.MenuModel();
console.log((app.menu).toJSON());
//Object {title: "this is a menu", status: "active"}
//set()方法且設(shè)置{validate: true}參數(shù)
app.menu.set({
title: 'menu',
}, {validate: true});
console.log(app.menu.get('title'));//this is a menu
//set()方法但不設(shè)置{validate: true}參數(shù)
app.menu.set({
title: 'menu',
});
console.log(app.menu.get('title'));//menu
注:validate函數(shù)接收的參數(shù)對象是在執(zhí)行set()或save()方法后模型的值對象乐设。
本篇對Backbone模型(Backbone.Model)對象進行了簡單闡述總結(jié)讼庇,在下一篇將對Backbone集合(Backbone.Collection)進行講述。