[Java教程]移动前端开发中的Backbone之一：Backbone中的模型和集合

0 2015-09-24 17:00:04

当我们开发含有大量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);

本文网址：http://www.shaoqun.com/a/144964.html

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

前端

0