backbonejs中的模型篇(二)


一:模型標識符

  每個模型都有一個用作唯一標識符的ID屬性,以便在不同模型間進行區分。通過id屬性我們可以直接訪問模型對象當中用於標識符存放的屬性,默認屬性名為id,但也可以通過設置idAttribute來改名。

如: var _model = Backbone.Model.extend({ idAttribute:'_id'});

  testObj = new _model({...})

設置id : testObj._id = Math.random().toString(36),substr(2);

獲取id: var id = testObj._id

二:模型屬性的驗證 (Backbone.Model自帶validate)

為了控制每個值的規范,我們常常需要對模型的屬性進行驗證。

1:在模型中定義validate()方法來進行屬性驗證

var _model = Backbone.Model.extend({

  validate:function(attrs){

    if(attrs.name !='test'){ return "name error info";}

}});    attrs參數包含了變化了的屬性值,如果不合法,會返回一條錯誤信息。

2:驗證觸發時間

  屬性驗證會在調用save()方法時被觸發

  調用set()方法時如果傳入{validate:true}作為最后一個參數的話也會觸發。

  如:testObj.set('name','test1',{validate:true});  //設置name值時觸發驗證

在模型驗證過程中,仍然可以通過get()和this.attributes來訪問到更改之前的屬性值

validate會在save()之前調用,參數為save()方法傳來的更新的屬性值,如果驗證錯誤,則save不會執行,觸發invalid事件

3:驗證的錯誤處理函數,失敗的驗證會觸發invalid事件

  a:可以通過模塊實例對象綁定invalid事件

     testObj.on('invalid',function(model,error){console.log(error)}

  b:可以把處理驗證的方法invalid函數作為參數傳給set(),save()等。。

    testObj.set({name:'test01'},{

      invalid:function(model,error){console.log(error)}

    }

4: 手動觸發驗證 ------isValid方法

  手動檢查一個模型是否合法 testObj.isValid(),注:isValid方法不會觸發invalid錯誤處理函數

三:高級的驗證方式

默認Backbone提供的一種模型屬性驗證法validate()需要自己創建驗證函數,會花掉很多時間。另外一個Backbone擴展插件Backbone.Validation提供很多驗證功能,只需要下載插件,並添加引用就可以使用。Backbone.Validation插件重寫了Backbone.Model的validate()方法,因此可以用以前的方式調用validate()和isValid()方法

操作步驟:

1:在初始化時,使用Backbone.Balidation.mixin來擴展Backbone.object()

_.extend(Backbone.Model.prototype, Backbone.Validation.mixin)

2:在validation屬性中定義驗證規則

如 var _model = Backbone.Model.extend({

  validation:{

    name:{required: true},

    email:{pattern: 'email'}

  }

});

3:使用 var testObj = new _model();

    testObj.set({email:'***@qq.com'},{validate:true})  //只有在設置email時會觸發驗證

    testObj.isValid(); //false   檢測模塊是否觸發驗證

    testObj.get('email') ; //undefine          testObj實例的email屬性尚未初始化

4:validation的內置驗證器

  required: 驗證屬性是否是必須的

  acceptance:驗證屬性值是否被接受。如:對類型為boolean的屬性值是否為true or false

    validation:{

      terms:{acceptance:true},

    }

  min:屬性值必須是數字且大於等於指定最小值

  max:屬性值必須是數字且小於等於指定最大值

  range:屬性值必須為數字且等於或在兩數值之間     range: [2, 18]

  length:驗證字符串的長度

  minLength:驗證字符串長度大於或等於指定值

  maxLength:驗證字符串長度小於或等於指定值

  rangeLength:驗證字符串長度等於或在指定值之間 

  oneOf: 驗證其值必須為指定數組中的一個         oneOf:["person","organization"]

  equalTo: 驗證屬性值必須等於指定的另外一個屬性值         如: passwordRepeat: {equalTo:'password'}

      pattern: 驗證屬性值為指定的模式,也可以是自己定義的一個正則表達式。內置模式有:“number,digits,email,url”

  如: phoneNumber:{pattern: /^ ********** $/}   自定義正則

四: 使用Backbone.Validation插件驗證html表單

  1:在視圖的initialize()方法中把視圖綁定到Backbone.Validation對象上

    var _view = Backbone.View.extend({

      initialize: function (){

        Backbone.Validation.bind(this);      

      }

    })

  當用戶在更新表單的屬性值時,如果是非法信息,Backbone.Validation會為該表單元素添加一個invalid樣式,並且在data-error屬性中設置一條錯誤信息。

  如:<input type='text' name='name' class='invalid' data-error='Name is required' />

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM