星空网 > 软件开发 > Java

移动前端开发中的Backbone之一:Backbone中的模型和集合

  当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据。 通过复杂多变的jQuery选择符和回调函数很容易创建Javascript应用程序,包括在HTML UI,Javascript逻辑和数据之间保持同步,都不复杂。 但对富客户端应用来说,良好的架构通常是有很多益处的。

  通过Backbone,你可以将数据呈现为 Models, 你可以对模型进行创建,验证和销毁,以及将它保存到服务器。 任何时候只要UI事件引起模型内的属性变化,模型会触发"change"事件; 所有显示模型数据的Views会接收到该事件的通知,继而视图重新渲染。

一、Model简介

  Model是任何JavaScript应用的核心,包括数据交互及与其相关的大量逻辑:转换、验证、计算属性和访问控制。

1、Model的建立:

1  var Model=Backbone.Model.extend({2       defaults:{3         name:"Cowen",4         age:285       }6     });7     var model=new Model();

 

2、defaults默认属性:

   在model中我们可以使用defaults来建立模型层中的默认属性,这些属性在模型层中使用attributes集合进行遍历。

1 var Model=Backbone.Model.extend({2       defaults:{3         name:"Cowen",4         age:285       }6     });7     var model=new Model();8     console.log(model.attributes)//Object {name: "Cowen", age: 28}

3、initialize初始化:

   Initialize使用在模型初始化之后,一般可以用于事件的绑定。

 1 var Model=Backbone.Model.extend({ 2       defaults:{ 3         name:"Cowen", 4         age:28 5       }, 6       initialize:function(){ 7         console.log('初始化'); 8       } 9     });10     var model=new Model();

4、Model的读值get和赋值set:

  模型在读取属性值和赋值时分别使用get和set方法,其中get直接读取属性值名称,set则是利用json对的形式进行赋值。get取值时一定要确定model中是否已存在该属性值,而set赋值则有可能是赋新值也有可能是替换默认值。

var Model=Backbone.Model.extend({      defaults:{        name:"Cowen",        age:28      }    });    var model=new Model();    model.set({'name':"郑昊"});//替换默认值    model.set({'sex':"male"});//赋新值    console.log(model.attributes);//Object {name: "郑昊", age: 28, sex: "male"}

5、has方法:

   模型中的has()方法主要是用来判读模型中是否存在指定的属性值。返回的是一个布尔类型的数据。

var Model=Backbone.Model.extend({      defaults:{        name:"Cowen",        age:28      }    });    var model=new Model();    console.log(model.has("sex"));//false

6、validate校验:

   Backbone继承自underscore.js中的validate方法,用来在执行invalid事件时会触发validate的检验。在对model进行属性赋值时,我们可以使用isvalid()来检验set的属性值是否符合validate校验。

 1 var Model=Backbone.Model.extend({ 2       validate:function(attributes){ 3         if(attributes.age<18){ 4           return "您未满18周岁"; 5         } 6         If(attributes.age>60){ 7           return "您的年龄太大" 8         } 9       }10     });11     var model=new Model();12     model.set({'age':40});13     console.log(model.isValid());//true

   如果我们需要显示出validate校验返回的错误提示,则这个时候我们在对属性值进行set赋值时要手动触发invalid事件。当然,前提是model在initialize初始化时已经对invalid事件进行了bind绑定。

 1 var Model=Backbone.Model.extend({ 2       initialize:function(){ 3         this.bind("invalid",function(model,error){ 4           console.log(error);        5         }); 6       }, 7       validate:function(attributes){ 8         if(attributes.age<18){ 9           return "您未满18周岁";10         }11         if(attributes.age>60){12           return "您的年龄太大";13         }14       }15     });16     var model=new Model();17     model.set({'age':400},{'validate':true});//返回的是"您的年龄太大"

 在对model执行save()方法时,也会自动触发invalid事件,进行validate校验。

 1 var Model=Backbone.Model.extend({ 2       initialize:function(){ 3         this.bind("invalid",function(model,error){ 4           console.log(error);        5         }); 6       }, 7       validate:function(attributes){ 8         if(attributes.age<18){ 9           return "您未满18周岁";10         }11         if(attributes.age>60){12           return "您的年龄太大";13         }14       }15     });16     var model=new Model();17     model.save({'age':17});// 返回的是"您未满18周岁";

二、Collection简介

  承接上一节我们学习过的Backbone中的模型(Model),我们不可能使用单个Model来描述业务层中所有的数据类型,需要使用Model的集合Collection来表示有序的集合。

 

 1   //定义模型层--Model 2   var Person=Backbone.Model.extend({ 3     defaults:{ 4       name:'', 5       age:0 6     } 7   }); 8   //定义集合层--Collection 9   var Persons=Backbone.Collection.extend({10     model:Person11   });12   var p1=new Person({name:'cowen'});13   var p2=new Person({name:'zhenghao'});14   var persons=new Persons();15   //将模型层添加到集合层16   persons.add(p1);17   persons.add(p2);

 

1、model属性:

   制定集合层中的model类型,可以直接在Collection中指定,也可以在创建Collection时再指定。

2、models属性:

   集合在创建后,自动创建一个models属性,在该属性中保存着添加到集合中的model数组,我们可以使用该属性值获得指定索引位置上的model模型实例。

 

  //定义模型层--Model  var Person=Backbone.Model.extend({    defaults:{      name:'',      age:0    }  });  //定义集合层--Collection  var Persons=Backbone.Collection.extend({    model:Person  });  var p1=new Person({name:'cowen'});  var p2=new Person({name:'zhenghao'});  var persons=new Persons();  //将模型层添加到集合层  persons.add(p1);  persons.add(p2);  console.log(persons.models[0].get('name'));//Cowen

 

3、add()和remove()方法:

   使用add()方法可以向collection集合中添加model模型,相反使用remove()方法可以从集合中删除相应的model。

4、at()方法:

   使用at()方法可以获取指定索引位置的model对象,类似于使用models[index]。

5、where查询和findwhere查询:

   在collection中可以使用where关键字查询,返回集合中所有匹配所传递 attributes(属性)的模型数组;而findWhere直接返回匹配所传递 attributes(属性)的第一个模型。

 

 1  //定义模型层--Model 2   var Person=Backbone.Model.extend({ 3     defaults:{ 4       name:'', 5       age:0 6     } 7   }); 8   //定义集合层--Collection 9   var Persons=Backbone.Collection.extend({10     model:Person11   });12   var p1=new Person({name:'cowen',age:18});13   var p2=new Person({name:'zhenghao',age:29});14   var p3=new Person({name:'lily',age:30});15   var persons=new Persons();16   //将模型层添加到集合层17   persons.add(p1);18   persons.add(p2);19   persons.add(p3);20   console.log(persons.where({age:29}).length);

 




原标题:移动前端开发中的Backbone之一:Backbone中的模型和集合

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2024春节流量大战 :https://www.kjdsnews.com/a/1726926.html
APP海外KOL营销如何衡量投放效果?这5个指标你知道吗?:https://www.kjdsnews.com/a/1726927.html
美国又出新规!一批卖家将受影响:https://www.kjdsnews.com/a/1726928.html
如果这些省钱的运营技巧你都没有用上,活该你利润低:https://www.kjdsnews.com/a/1726929.html
英超球队“曼联”发起侵权维权,案件号:2024-cv-00158:https://www.kjdsnews.com/a/1726930.html
2023年德国电商销售额大幅下降!首次跌破1000亿欧元!:https://www.kjdsnews.com/a/1726931.html
2024.04.18亚马逊选品推荐(仅供参考):女装蛋糕连衣裙:https://www.kjdsnews.com/a/1842234.html
欧洲市场疯了,订单排到7、8月!:https://www.kjdsnews.com/a/1842235.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流