Backbone模型包含应用程序的数据和与数据相关的逻辑处理,我们通过拓展Backbone.Model对象来创建模型:
var app = app || {};
app.MenuModel = Backbone.Model.extend({});
构造函数初始化
当创建一个模型的新实例时,其构造函数,即initialize()方法会被调用:
app.MenuModel = Backbone.Model.extend({
initialize: function() {
console.log('Initialize the Model.');
}
});
app. menu = new app.MenuModel();
默认值
创建Backbone模型时,Backbone允许我们为模型设置一组默认值,通过defaults属性即可设置;当实例化模型时,可传入一个参数对象,此对象即为模型的数据,传入参数值将覆盖所设置的默认值。
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()方法用于设置模型的一个或多个属性值:
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属性,是包含模型状态的一个内部散列表,使用Model.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.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":"最近会话"}
注:当给JSON.stringify()传递带toJSON()方法的对象时,其处理的是该对象执行toJSON()方法后返回的值,而不是原始传入的对象,如:
var a = {
data: {
name: '惊鸿',
title: 'sj'
},
toJSON: function() {
return 'sds';
}
};
console.log(JSON.stringify(a));//"sds"
模型id与cid
id
id是模型的特殊属性,可以是任意字符串(整型 id 或 UUID)。在属性中设置的 id 会被直接拷贝到model属性上。 也可以在集合(collections)中通过 id 获取特定model。
-
idAttribute
模型的唯一标识符,被储存在 id 属性下,可以通过设置Model的idAttribute与一个唯一值key对应,从而形成一个从该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创建时自动产生的唯一标识符。 客户端id在model尚未保存到服务器之前便存在,此时model可能仍不具有最终的id,但已经需要在用户界面可见。
console.log(app.menu.cid);//c1或其他
模型变化监听
通过监听模型上change事件,可以监测到模型的变化,既可以监听整个模型的改变,也可以监听模型单个属性的变化;通常在模型initialize()函数中添加监听器:
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
name: '最近会话',
status: 'active'
},
initialize: function() {
//监听模型变化
this.on('change', function(model) {
console.log(model);
console.log('模型已改变');
});
//监听模型单个属性变化
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: '常用联系人',
});
console.log(app.menu.get('name'));//常用联系人
验证
调用Model.validate()方法进行模型验证,在设置属性值之前对其进行验证,默认,在使用save()方法或调用set()方法时设置了{validate: true}参数以持久化数据模型均会触发验证;验证通过将不返回值,验证失败将触发"invalid"事件, 此方法返回一个错误值,并用此方法返回的值设置模型上的validationError属性,同时模型上的属性值不会持久化到服务器:
app.MenuModel = Backbone.Model.extend({
defaults: {
title: 'this is a menu',
//name: '最近会话',
status: 'active'
},
validate: function(attr) {
if (attr.name == undefined ) {
//返回错误值
return '菜单名不能为空';
}
},
initialize: function() {
//监听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()方法且设置{validate: true}参数
app.menu.set({
title: 'menu',
}, {validate: true});
console.log(app.menu.get('title'));//this is a menu
//set()方法但不设置{validate: true}参数
app.menu.set({
title: 'menu',
});
console.log(app.menu.get('title'));//menu
注:validate函数接收的参数对象是在执行set()或save()方法后模型的值对象。
本篇对Backbone模型(Backbone.Model)对象进行了简单阐述总结,在下一篇将对Backbone集合(Backbone.Collection)进行讲述。