zoukankan      html  css  js  c++  java
  • backbone.js之Model篇 简单总结和深入(2)

    一、模型属性的一些操作方法

      1、mmodel.get()   获取属性的值

      2、mmodel.set('age',5)  更新单个属性的值

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

         在设置属性值时,如果该属性不存在,会自动创建该属性;同时会以true的形式返回一个模型的引用。

      3、mmodel.unset('age')  从模型中删除一个属性

      4、mmodel.clear()   从模型中删除所有的属性

      5、mmodel.has('age')   检查是否存在某一属性

      6、mmodel.isValid()   手动触发验证,只会返回true或者false,但不会触发invalid

      

    二、HTML转义后的属性值

      如果用户输入的文字不是纯文本格式,可能会有一些导致XSS注入攻击的安全漏洞,解决的办法就是任何用户输入文字之前使用escape()

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

    三、重写setter 方法和 getter方法

      1、使用原因:

        (1 属性需要变化格式进行存储

        (2 需要一个模型虚拟属性,依赖于其他属性

        (3  防止把非法的值赋值给模型属性

      2、操作:需要引入mutators.js,到https://github.com/asciidisco/Backbone.Mutators下载 backbone.mutators.js 文件,然后引入到项目中

      3、原因(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);

      4、反过来,重写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);

      5、值得注意的是:

        (1 如果是在创建新模型的时候给属性赋值,没有触发到change事件的话,其对应的setter方法是不会触发的。

        (2 新的方法会试图先调用被重写的getter和setter方法,再去调用原始的get() 和 set()

  • 相关阅读:
    Apache 阿帕奇 配置运行环境
    2019年6月多校联训b层——搜索算法 Problem A 宽搜 营救
    西安集训B Day1 test 问题 C: 小明的城堡
    西安集训B层Day1 test 问题 A: 旅行日记
    二分答案—洛谷P1182 数列分段`Section II`
    2019.5.25 Noip模拟测试2 T2题解
    2019.5.25 Noip模拟测试2 T1题解
    DP专题练习 toasting
    2019.5.1 DP专题训练 山峰数(hill)
    React 点击按钮显示div与隐藏div
  • 原文地址:https://www.cnblogs.com/daomul/p/4815603.html
Copyright © 2011-2022 走看看