backbone.js之Model篇 簡單總結和深刻(2)

1、模型屬性的一些操做方法git

  一、mmodel.get()   獲取屬性的值github

  二、mmodel.set('age',5)  更新單個屬性的值安全

     mmodel.set({name:'aaa',age:6})  更新多個屬性的值this

     在設置屬性值時,若是該屬性不存在,會自動建立該屬性;同時會以true的形式返回一個模型的引用。spa

  三、mmodel.unset('age')  從模型中刪除一個屬性3d

  四、mmodel.clear()   從模型中刪除全部的屬性code

  五、mmodel.has('age')   檢查是否存在某一屬性blog

  六、mmodel.isValid()   手動觸發驗證,只會返回true或者false,但不會觸發invalid事件

  

2、HTML轉義後的屬性值ip

  若是用戶輸入的文字不是純文本格式,可能會有一些致使XSS注入攻擊的安全漏洞,解決的辦法就是任何用戶輸入文字以前使用escape()

1 var  testModel =  new Backbone.Model({
2     name : "<script>alert(11)</script>"
3 });
4 
5 var escaped_name = testModel.escape('name');

3、重寫setter 方法和 getter方法

  一、使用緣由:

    (1 屬性須要變化格式進行存儲

    (2 須要一個模型虛擬屬性,依賴於其餘屬性

    (3  防止把非法的值賦值給模型屬性

  二、操做:須要引入mutators.js,到https://github.com/asciidisco/Backbone.Mutators下載 backbone.mutators.js 文件,而後引入到項目中

  三、緣由(2)demo:

 1 (function($){
 2     
 3         var testModel = Backbone.Model.extend({
 4 
 5             
 6  mutators:{
 7                 fullMessage : {
 8                     get: function(){
 9                         return this.get('name') + ' -and-' + this.get('age');
10                         //return this.name + ' -hh-' + this.age;
11                     }
12                 }
13             }
14         });
15         
16         var t = new testModel;
17         t.set({
18             name :'Axiba',
19             age : 33
20         });
21         alert(t.get('fullMessage'));
22         alert(t.get('name'));
23         
24     })(jQuery);

  四、反過來,重寫setter方法的demo,注意key和value:

 1 (function($){
 2     
 3         var testModel = Backbone.Model.extend({
 4 
 5             
 6  mutators:{
 7                 fullMessage : {
 8                     get: function(){
 9                         return this.get('name') + '-and-' + this.get('age');
10                     },
11                     set: function(key, value, options, set){
12                         var message = value.split('-and-');
13                         this.set('name',message[0],options);
14                         this.set('age',message[0],options);
15                     }
16                 }
17             }
18         });
19         
20         var t = new testModel;
21         t.set({
22             name :'Axiba',
23             age : '33'
24         });
25         
26         t.set('fullMessage','daomul-and-11');
27         
28         alert(t.get('fullMessage'));
29         alert(t.get('name'));
30         alert(t.get('age'));
31         
32     })(jQuery);

  五、值得注意的是:

    (1 若是是在建立新模型的時候給屬性賦值,沒有觸發到change事件的話,其對應的setter方法是不會觸發的。

    (2 新的方法會試圖先調用被重寫的getter和setter方法,再去調用原始的get() 和 set()

相關文章
相關標籤/搜索