您當前位置：首頁 > web前端 > htmlcss > Backbone.js學習之Model

Backbone.js學習之Model

來源：程序員人生發布時間：2015-01-20 08:59:07 閱讀次數：2695次


首先，我們看1下官方文檔中對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本身就提供了1系列基本的管理功能。
然后，我們還在文檔中看到Model具有好多方法，這里就不逐一介紹了。
簡單的Model例子
定義了1個最基礎的Model，只是實現了initialize這個初始化方法。這個函數會在Model被實例化時調用。
var Man = Backbone.Model.extend({
        constructor: function(){
            alert('Hey, you create me!');
        }
         });
        var man = new Man;

初始化函數，也能夠叫構造函數。比如你這里完全可以把constructor寫成initialize，效果是1樣的。至于為何1樣？這還得等到熟習這個框架過后看看Backbone源碼才能知道。

Molde對象屬性賦值的兩種方法

1種是設置默許值

        var Man = Backbone.Model.extend({
        initialize: function(){
            alert('Hey, you create me!');
        },
        defaults: {
            name:'張3',
            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);

從這個對象的取值方式可以知道，屬性在1個Model是以字典（或類似字典）的方式存在的，第1種設定默許值的方式，只不過是實現了Backbone的defaults這個方法，或是給defaults進行了賦值。通過打印出man這個對象，我們可以發現，屬性是存在1個叫做attributes的對象中的。

Model對象中的方法

var Man = Backbone.Model.extend({
        initialize: function(){
            alert('Hey, you create me!');
        },
        defaults: {
            name:'張3',
            age: '38'
        },
        aboutMe: function(){
            return '我叫' + this.get('name') + ',今年' + this.get('age') + '歲';
        }
    });
    var man = new Man;
    alert(man.aboutMe());

也是比較簡單，只是增加了1個新的屬性，值是1個function。說到這，不知道你是不是發現，在所有的定義或賦值操作中，都是通過字典的方式來完成的，比如extend Backbone的Model，和定義方法，定義默許值。方法的調用和其他的語言1樣，直接 . 便可，參數的定義和傳遞也1樣。

監聽Model對象中屬性的變化

假定你有在對象的某個屬性產生變化時去處理1些業務的話，下面的示例會有幫助。仍然是定義那個類，不同的是我們在構造函數中綁定了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:'張3',
            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:'張3',
            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")+"驗證通過");
}