首先,我们看1下官方文档中对Model的解释(或说定义):
Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
翻译成中文就是:
Model是js利用的核心,包括交互数据和围绕着这些数据的大部份逻辑:数据转换、验证、属性计算和访问控制。你可使用特定方法来扩大Backbone.Model,并且Model本身就提供了1系列基本的管理功能。
然后,我们还在文档中看到Model具有好多方法,这里就不逐一介绍了。
简单的Model例子
定义了1个最基础的Model,只是实现了initialize这个初始化方法。这个函数会在Model被实例化时调用。
var Man = Backbone.Model.extend({
constructor: function(){
alert('Hey, you create me!');
}
});
var man = new Man;
初始化函数,也能够叫构造函数。比如你这里完全可以把constructor写成initialize,效果是1样的。至于为何1样?这还得等到熟习这个框架过后看看Backbone源码才能知道。
1种是设置默许值
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张3',
age: '38'
}
});
var man = new Man;
console.info(man.get("name"));
或这样赋值
man.set({name:'the5fire',age:'10'});
console.info(man.get("name"));
console.info(man);
从这个对象的取值方式可以知道,属性在1个Model是以字典(或类似字典)的方式存在的,第1种设定默许值的方式,只不过是实现了Backbone的defaults这个方法,或是给defaults进行了赋值。通过打印出man这个对象,我们可以发现,属性是存在1个叫做attributes的对象中的。
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张3',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
alert(man.aboutMe());
也是比较简单,只是增加了1个新的属性,值是1个function。说到这,不知道你是不是发现,在所有的定义或赋值操作中,都是通过字典的方式来完成的,比如extend Backbone的Model,和定义方法,定义默许值。方法的调用和其他的语言1样,直接 .
便可,参数的定义和传递也1样。
假定你有在对象的某个属性产生变化时去处理1些业务的话,下面的示例会有帮助。仍然是定义那个类,不同的是我们在构造函数中绑定了name属性的change事件。这样当name产生变化时,就会触发这个function。
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为:" + name);
});
},
defaults: {
name:'张3',
age: '38'
}
});
var man = new Man;
//触发绑定的change事件,alert。
man.set({name:'the5fire'});
//触发绑定的change事件,alert。
man.set({name:'the5fire.com'});
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听, change事件会先于validate产生
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为:" + name);
});
this.bind("invalid",function(model,error){
alert(error);
});
},
defaults: {
name:'张3',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空!";
}
}
});
var man = new Man;
// 这类方式添加毛病处理也行
// man.on('invalid', function(model, error){
// alert(error);
// });
//默许set时不进行验证
man.set({name:''});
//save时触发验证。根据验证规则,弹出毛病提示。
man.save();
//手动触发验证, set时会触发
man.set({name:'moyi'}, {'validate':true});
//验证通过时信息
if (man.isValid()) {
alert(man.get("name")+"验证通过");
}