“Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制”。
一、初始化方法
我们先来看一个demo，initialize，这是一个初始化方法，但是写这段代码之前，首先要在<head>元素中导入3个相应的库文件，即jQuery框架、Backbone主框架和依赖库Underscore。需要注意它们导入页面的顺序，由于代码是按照自上而下的顺序进行执行的，因此先导入jQuery框架文件；Backbone依赖于Underscore库，因此在导入Underscore库文件后，才导入Backbone主框架文件。
比如说：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>daomul for Axiba</title>
5 </head>
6 <body>
7 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
8 <script src="js/underscore.js"></script>
9 <script src="js/backbone.js"></script>
10 <script>
11
12 (function($){
13 //Backbone通过extend来扩展实例方法和静态方法：
14 //initialize这个初始化方法，也称构造函数。这个函数会在Model被实例化时调用。
15 var People = Backbone.Model.extend({
16 initialize:function(){
17 alert(‘hi , i am daomul!‘);
18 }
19 });
20 var person = new People;
21 })(jQuery);
22
23 </script>
24 </body>
25 </html>
二、defaults 和 对象赋值方法get 和 set
属性在一个Model是以字典（或者类似字典）的方式存在的，设定默认值的方式，只不过是实现了Backbone的defaults这个方法，或者是给defaults进行了赋值。
1 (function($){
2
3 var People = Backbone.Model.extend({
4 initialize : function(){
5 alert(‘come on !‘);
6 },
7 defaults:{
8 name : ‘ daomul ‘,
9 age : ‘ 24 ‘
10 }
11 });
12
13 var person = new People;
14
15 //get获取对象的值
16 alert(person.get(‘age‘));
17
18 //set改变对象的值
19 person.set({phone:‘134133‘,sex:‘男‘});
20 alert(person.get(‘sex‘));
21
22 })(jQuery);
三、对象中的自定义方法
模型中的自定义方法，可以发现是通过字典的方式来构造的，方法的调用也是可以通过.语法来操作的。
1 (function($){
2
3 var People = Backbone.Model.extend({
4 initialize: function(){
5
6 },
7 defaults:{
8 country : ‘China‘
9 },
10 myPrivateMethod : function(){
11 return ‘I \‘m from ‘ + this.get(‘country‘) + ‘ and my name \‘s ‘ + this.get(‘name‘);
12 }
13 });
14
15 var person = new People;
16 person.set({name : ‘Axiba‘});
17 alert(person.myPrivateMethod());
18
19 })(jQuery);
四、绑定监听对象中属性的变化
通过this.bind绑定监听对象中属性值的变化，改变是通过change:name，也是字典的格式来定义的。
1 (function($){
2
3 var People = Backbone.Model.extend({
4 initialize:function(){
5 alert(‘1‘);
6 //绑定监听
7 this.bind(‘change:name‘,function(){
8 var name = this.get(‘name‘);
9 alert(‘oh ,no u change my name to ‘ + name);
10 });
11 },
12 defaults : {
13 name : ‘Axiba‘,
14 age : ‘100‘
15 }
16 });
17
18 var person = new People;
19 person.set({name : ‘Axiba2‘});
20
21 })(jQuery);
五、验证规则以及错误的提示
通过下面的demo可以看出有三种方式可以触发值改变的验证：
1 (function($){
2 var People = Backbone.Model.extend({
3
4 initialize:function(){
5 this.bind("invalid",function(model,error){
6 alert(error);
7 });
8 },
9 defaults:{
10 name : ‘Axiba‘,
11 age : 11
12 },
13 validate:function(attributes){
14
15 if(attributes.name == ‘‘) {
16 return "name不能为空！";
17 }
18 }
19 });
20
21 var person = new People;
22
23 //方法1 ：默认set时不进行验证，save时触发验证。根据验证规则，弹出错误提示。
24 //person.set({name : ‘‘});
25 //person.save();
26
27 //方法2 ：手动触发验证, set时会触发
28 //person.set({name:‘‘}, {‘validate‘:true});
29
30 //方法3 ：添加错误处理也行
31 person.on(‘invalid‘, function(model, error){
32 alert(error);
33 });
34 person.set({name : ‘‘});
35 person.save();
36
37 })(jQuery);*/
时间： 2024-10-25 12:06:07