BackboneJs入门学习之模块—Model实践(1)
上一篇中,我们简单了解了Backbone中Model这个模块。这一篇中,将具体介绍Model中的一些操作。
用一张图来回顾backbone中各个模块的关联:
Ok,切入本篇正题。
- Model中对象属性的赋值方法
在Model中对属性的赋值可以使用两种方法:
1.方式一: 使用直接定义的方式赋值——设置默认值(defaults)
示例:
var Man=Backbone.Model.extend({
initialize:function(){
alert('Hello world.');
},
//设置默认值
defaults:{
name:'张三',
age:'38'
}
});
//实例化
var man=new Man;
alert(man.get('name'));//使用get获取属性值
1.方式二:赋值时定义——set()
示例:
var Man=Backbone.Model.extend({
initialize:function(){
alert('Hello world');
}
});
var man=new Man;
//使用set方法对man添加属性和属性值,这类似{key:value}的方式
man.set({name:'张三',age:'10'});
alert(man.get('name'));
怎么样?是不是很轻松!
2. 对象的方法
既然对象有属性,那就得要有方法了。
其实,在所有的定义或是赋值中,都是通过字典的方式来完成的,如extend
Backbone中德Model,以及定义方法和定义属性。所以,对方法的定义很类似。
示例:
var Man=new Backbone.Model.extend({
initialize:function(){
alert('Hello world');
},
defaults:{
name:'张三',
age:'10'
},
//定义方法
aboutMe:function(){
return '我叫'+this.get('name')+',今年'+this.get('age')+'岁';
}
});
var man=new Man;
alert(man.aboutMe());//调用方法
3.监听对象中属性的变化——change
以上介绍了对象的属性和方法,那么当属性变化时该如何做出相应呢?Backbone中使用change事件进行监听
change事件:当属性发生变化时,就会被触发;
示例:
var Man=Backbone.model.extend({
initialize:function(){
alert('Hello world');
//初始化时绑定监听
this.bind('change:name',function(){
var name=this.get("name");
alert("你改变了name属性,值为:"+name);
});
},
defaults:{
name:'张三',
age:'38'
},
aboutMe:function(){
return '我叫'+this.get('name')+'今年'+this.get('age')+'岁';
}
});
var man=new Man;
man.set({name:'李四'});//将张三改为李四,于是触发change事件,弹出提示信息
这就相当于js中的onchange()事件。
每篇一语:
当你发现你喜欢做一件事情时,就应该持续的做下去!