腾挪前端开发中的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:28
5 }
6 });
7 var model=new Model();
2、defaults默认属性：
在model中我们可以使用defaults来建立模型层中的默认属性，这些属性在模型层中使用attributes集合进行遍历。
1 var Model=Backbone.Model.extend({
2 defaults:{
3 name:"Cowen",
4 age:28
5 }
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:Person
11 });
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:Person
11 });
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);
- 2楼普通男孩
- 有没有一个入门的demo下载啊
- 1楼德古拉伯爵
- 后续会提供各个章节的demo下载