Backbone.js學習之Model，backbone.jsmodel

Backbone.js學習之Model，backbone.jsmodel

首先，我們看一下官方文檔中對Model的解釋（或者說定義）：
  

   
Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
  
翻譯成中文就是：
  

   
Model是js應用的核心，包括互動資料以及圍繞著這些資料的大部分邏輯：資料轉換、驗證、屬性計算和存取控制。你可以使用特定方法來擴充Backbone.Model，並且Model本身就提供了一系列基本的管理功能。
  
然後，我們還在文檔中看到Model擁有好多方法，這裡就不一一介紹了。
簡單的Model例子
定義了一個最基礎的Model，只是實現了initialize這個初始化方法。這個函數會在Model被執行個體化時調用。
var Man = Backbone.Model.extend({        constructor: function(){            alert('Hey, you create me!');        }         });        var man = new Man;
初始化函數，也可以叫建構函式。比如你這裡完全可以把constructor寫成initialize，效果是一樣的。至於為什麼一樣？這還得等到熟悉這個架構過後看看Backbone源碼才能知道。
Molde對象屬性賦值的兩種方法
一種是設定預設值
        var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');        },        defaults: {            name:'張三',            age: '38'        }    });    var man = new Man;    console.info(man.get("name"));
或者這樣賦值
    man.set({name:'the5fire',age:'10'});    console.info(man.get("name"));    console.info(man);
從這個對象的取值方式可以知道，屬性在一個Model是以字典（或者類似字典）的方式存在的，第一種設定預設值的方式，只不過是實現了Backbone的defaults這個方法，或者是給defaults進行了賦值。通過列印出man這個對象，我們可以發現，屬性是存在一個叫做attributes的對象中的。
Model對象中的方法
var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');        },        defaults: {            name:'張三',            age: '38'        },        aboutMe: function(){            return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';        }    });    var man = new Man;    alert(man.aboutMe());
也是比較簡單，只是增加了一個新的屬性，值是一個function。說到這，不知道你是否發現，在所有的定義或者賦值操作中，都是通過字典的方式來完成的，比如extend Backbone的Model，以及定義方法，定義預設值。方法的調用和其他的語言一樣，直接 . 即可，參數的定義和傳遞也一樣。
監聽Model對象中屬性的變化
假設你有在對象的某個屬性發生變化時去處理一些業務的話，下面的樣本會有協助。依然是定義那個類，不同的是我們在建構函式中綁定了name屬性的change事件。這樣當name發生變化時，就會觸發這個function。
var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');            //初始化時綁定監聽            this.bind("change:name",function(){                var name = this.get("name");                alert("你改變了name屬性為：" + name);            });        },        defaults: {            name:'張三',            age: '38'        }    });    var man = new Man;    //觸發綁定的change事件，alert。    man.set({name:'the5fire'});    //觸發綁定的change事件，alert。    man.set({name:'the5fire.com'});
為Model對象添加驗證規則，以及錯誤提示
var Man = Backbone.Model.extend({        initialize: function(){            alert('Hey, you create me!');            //初始化時綁定監聽, change事件會先於validate發生            this.bind("change:name",function(){                var name = this.get("name");                alert("你改變了name屬性為：" + name);            });            this.bind("invalid",function(model,error){                alert(error);            });        },        defaults: {            name:'張三',            age: '38'        },        validate:function(attributes){            if(attributes.name == '') {                return "name不可為空！";            }        }    });    var man = new Man;    // 這種方式添加錯誤處理也行    // man.on('invalid', function(model, error){    //         alert(error);    // });    //預設set時不進行驗證    man.set({name:''});    //save時觸發驗證。根據驗證規則，彈出錯誤提示。    man.save();    //手動觸發驗證, set時會觸發    man.set({name:'moyi'}, {'validate':true});    //驗證通過時資訊    if (man.isValid()) {  alert(man.get("name")+"驗證通過");}


其他精彩文章
jQuery教程(19)-jquery ajax操作之序列化表單jQuery教程(18)-ajax操作之執行POST請求jQuery教程(17)-ajax操作之向伺服器傳遞資料 執行GET請求jQuery教程(16)-ajax操作之載入XML文檔jQuery教程(15)-ajax操作之執行指令碼jQuery教程(14)-ajax操作之操作 JavaScript 對象