backBone.js之Model篇 (1) 简单实例
“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);*/
