BackboneJs入门学习[03]—Model实践(1)

时间:2023-02-05 14:12:43

BackboneJs入门学习之模块—Model实践(1)

上一篇中,我们简单了解了Backbone中Model这个模块。这一篇中,将具体介绍Model中的一些操作。


用一张图来回顾backbone中各个模块的关联:
BackboneJs入门学习[03]—Model实践(1)

Ok,切入本篇正题。

  1. 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'));

怎么样?是不是很轻松!
BackboneJs入门学习[03]—Model实践(1)

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()事件。


每篇一语:
当你发现你喜欢做一件事情时,就应该持续的做下去!

BackboneJs入门学习[03]—Model实践(1)