backBone.js之Model篇 (1) 簡單實例

時間 2019-11-11

標籤 backbone.js backbone model 簡單實例欄目 JavaScript 简体版

原文原文鏈接

　　　　「Model是js應用的核心，包括基礎的數據以及圍繞着這些數據的邏輯：數據轉換、驗證、屬性計算和訪問控制」。html

1、初始化方法jquery

　　咱們先來看一個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>

2、defaults 和對象賦值方法get 和 setthis

　　屬性在一個Model是以字典（或者相似字典）的方式存在的，設定默認值的方式，只不過是實現了Backbone的defaults這個方法，或者是給defaults進行了賦值。spa

 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);

3、對象中的自定義方法code

　　模型中的自定義方法，能夠發現是經過字典的方式來構造的，方法的調用也是能夠經過.語法來操做的。htm

 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);

4、綁定監聽對象中屬性的變化對象

　　經過this.bind綁定監聽對象中屬性值的變化，改變是經過change:name，也是字典的格式來定義的。blog

 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);

5、驗證規則以及錯誤的提示

　　經過下面的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);*/

1. Backbone.js之model篇(一)
2. backbone.js之Model篇簡單總結和深刻(2)
3. backbone.js 教程(1) View & Model & Collection
4. Backbone.js 中使用 Model
5. Flask簡單實例-1
6. Servlet+Jdbc簡單實例(1)
7. 實例學習Backbone.js（一）
8. Binder之簡單實例
9. Django簡單實例
10. Android MVP 簡單實例
更多相關文章...
• PHP 完整表單實例 - PHP教程
• XLink 實例 - XLink 和 XPointer 教程
• Github 簡明教程
• TiDB 在摩拜單車在線數據業務的應用和實踐

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。