本文详细介绍Backbone.js中集合对象的创建与操作方法，包括自定义与实例化集合对象、增删查改模型对象、排序及与服务器交互等功能。
5.1 创建集合对象
在Backbone中，创建模型集合的方法十分简单，通常分为两种方法：一种方法是自定义集合类，再实例化集合对象；另一种方法是直接实例化集合对象。从执行效果来看，后一种方法比前一种方法在代码上更简洁、更高效。
5.1.1 自定义集合对象
集合类是依附于数据模型类，使用自定义集合对象时，首先自定义一个集合类，并在集合类中设置model属性值来声明模型类。然后实例化一个当前集合类的对象，就可以向该对象添加各个数据模型对象。下面通过一个简单的示例来说明在实例化集合对象之后，添加数据模型对象的过程。
示例5-1 自定义集合对象
1.功能描述
首先，定义一个数据模型类student，并在构建该类时，通过defaults属性设置默认属性值。然后，仍然调用extend扩展方法，以自定义的方式构建一个基于数据模型类student的数据集合类stulist。在构建集合类时，通过model属性设置依附的模型类名称。最后，定义一个数组对象stumodels，用于保存模型数据，并在实例化一个名为stus的集合对象时，将该数组对象以实参的形式添加到对象中。集合对象会自动将这些模型数据转化成一个个对应的模型对象，遍历集合对象stus中的模型对象，并在遍历过程中将各个模型对象中的内容以JSON格式输出到浏览器的控制台中。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
});
var stulist = Backbone.Collection.extend({
model:student
});
var stumodels = [
{Code: "10104",Name: "张三",Score: "500"},
{Code: "10105",Name: "李四",Score: "300"},
{Code: "10106",Name: "王五",Score: "700"},
];
var stus = new stulist(stumodels);
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}2.源码分析
本示例通过extend方式自定义一个集合类stulist，并在定义该类的过程中，设置依附于本类的数据模型model属性值。当实例化一个集合类对象，并向该对象添加数据时，集合类会自动创建model属性值指定的数据模型，并将这些对象存储至数据模型中。严格来说，这些数据模型对象实际上都存储在集合对象的model属性中，该属性是一个数组集合。因此，遍历该数组集合时，便可以访问每一个模型对象，并以JSON格式的方式输出模型对象中的数据。
5.1.2 实例化集合对象
在示例5-1中，先自定义集合类，再实例化该类的方式实现了集合对象的定义，这种方式相对复杂些。虽然复杂，但采用extend方式自定义集合类，可以在自定义的类中扩展其他的属性和方法，拓展性更强。其实，也可以通过直接实例化一个集合类的方式来实现集合对象的定义，相比而言，这种方式更加简单。
示例5-2 实例化集合对象
1.功能描述
在示例5-1的基础之上进行修改，当构建完模型类和用于填充集合对象的数组之后，采用new实例化的方式直接定义集合对象。在定义过程中，调用数组初始化集合数据，并通过配置文件对象model属性声明该集合对象所依附的模型类名。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
});
var stumodels = [
{Code: "10104",Name: "张三",Score: "500"},
{Code: "10105",Name: "李四",Score: "300"},
{Code: "10106",Name: "王五",Score: "700"},
];
var stus = new Backbone.Collection(stumodels,{//这里是和上面不同的 1.new 2.没有extend
model:student
});
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}2.源码分析
在上述代码中，集合对象stus是通过直接实例化集合类定义的。在定义的过程中，第一个参数为添加的模型数据，该数据在定义时也会自动转成一个个模型对象；同时，第二个参数为配置对象，通过该对象添加并设置model属性值，集合内部将根据该属性值自动将获取的模型数据转化成该属性值的模型实例对象。其最终在chrome浏览器控制台输出效果与上图5-1完全一样。
5.1.3 自定义集合方法
以自定义的方式构建集合类时，不仅可以通过model属性指定依附的数据模型，而且还可以自定义方法。因为在集合对象中，都是针对数据的存储和管理，集合中的方法侧重于对数据的操作，例如根据规则过滤数据。接下来通过一个简单的示例来演示集合中定义方法的过程。
示例5-3 自定义集合方法
1.功能描述
在构建集合模型时，除设置model属性值外，自定义一个good方法。在该方法中，调用集合对象中的filter方法，只要Score大于400的模型对象，即调用该方法时，将返回Score属性大于400的模型对象集合。
此外，当实例化一个集合对象之后，通过该对象调用自定义的good方法，并将该方法返回的模型对象保存到变量stug中，最后通过遍历的方式将变量stug中的各个模型对象以JSON格式显示在浏览器的控制台中。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
});
var stulist = Backbone.Collection.extend({
model:student,
good:function(){
return this.filter(function(stu){
return stu.get("Score")>400;
});
}
});
var stumodels = [
{Code: "10104",Name: "张三",Score: "500"},
{Code: "10105",Name: "李四",Score: "300"},
{Code: "10106",Name: "王五",Score: "700"},
];
var stus = new stulist(stumodels);
var stug = stus.good();
for(var i=0;i<stug.length;i++){
console.log(stug[i].toJSON());
}2.源码分析
从上图中可以看出，由于是遍历显示Score属性值于大于400的模型对象，当调用good方法时，数据模型集合又进行了一次过滤，返回符合条件的模型对象。在数据模型集合中存在一个Score属性值为300的模型对象，不符合过滤规则，因此该模型对象没有出现在模型对象集合中。
5.2 操作集合中模型对象
在上一节中介绍了定义集合对象的方法，当一个集合对象定义完成之后，它所包含的都是定义时的一个个数据模型对象。这些模型对象也可以通过集合类提供的方法进行移除，也能调用添加模型对象的方法进行再次增加。在移除或增加时，将会自动触发remove或add事件。此外，还可以针对集合中模型对象进行查询和排序的操作。
5.2.1 移除集合对象中的模型
集合类中提供了3种移除集合对象中模型的方法，分别为remove、pop、shift，它们的使用方法如下。
（1）remove方法的功能是从指定的集合对象中移除一个或多个模型对象，该方法的调用格式如下。
obj.remove(models,options)
其中，obj为实例化后的集合对象，models为一个或多个模型对象，options为配置对象，可以在该对象中设置slient属性等。
（2）pop方法的功能是移除集合对象中最后一个模型对象，该方法的调用格式如下。
obj.pop(options)
（3）shift方法的功能是移除集合对象中首个模型对象，该方法的调用格式如下。
obj.shift(options)
在上述pop和shift方法的调用格式中，各参数与remove的功能一样，不在赘述。接下来通过一个简单的示例来介绍这些方法的使用过程，
示例5-4 移除集合对象中的模型
1.功能描述
在本示例中，首先使用shift方法删除第一条模型对象。然后使用remove方法删除第四条模型对象，即索引号为3（因为索引号默认从0开始）。最后使用pop方法删除最后一条模型对象，并遍历剩余的模型对象数据，以JSON格式在浏览器的控制台中输出各个模型对象的内容。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
});
var stumodels = [{
Code: "10101",
Name: "刘真真",
Score: 530
}, {
Code: "10102",
Name: "张明基",
Score: 460
}, {
Code: "10103",
Name: "舒虎",
Score: 660
}, {
Code: "10104",
Name: "周小敏",
Score: 500
}, {
Code: "10105",
Name: "陆明明",
Score: 300
}, {
Code: "10106",
Name: "占小方",
Score: 380
}, {
Code: "10107",
Name: "陈天豪",
Score: 720
}];
var stus = new Backbone.Collection(stumodels,{
model:student
});
//删除第1条模型对象
stus.shift();
//删除第4条模型对象
stus.remove(stus.models[3]);
//删除最后一条模型对象
stus.pop();
//重新输出全部的模型对象
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}2.源码分析
从上图中可以看出，有下划线的数据都被删除。首先，删除第一条，即Code属性值为10101的模型对象；然后删除第四条，即索引号为3的模型对象，在删除第一条的基础之上，这条记录就指向了Code属性值为10105的模型对象。最后删除最后一条，即Code属性值为10107的模型对象。这个示例说明，在每次按顺序删除模型对象后，内部的模型对象集合都会重排索引号。
5.2.2 添加集合对象中的模型
上一节中介绍了如何删除集合对象中的模型方法，集合的类中还提供了与删除方法相对应增加集合对象模型的方法，用于新增模型对象，实现的方法提供了以下几种。
（1）add方法与remove方法对应，功能是向集合对象中指定的位置插入模型对象，没有指定位置，默认为集合对象的尾部。该方法的调用格式如下。
obj.add(models,options)
（2）push方法与pop方法对应，功能是向集合对象的尾部插入模型对象。它的功能与add方法类似，只是明确了是插入尾部位置，该方法的调用格式如下。
obj.push(models,iptions)
（3）unshift方法与shift方法对应，功能是向集合对象的头部插入模型对象。它的功能和push方法类似，只是插入的位置不同，该方法的调用格式如下。
obj.unshift(models,options)
以上三种方式使用的参数与add使用的参数说明基本相同，不在赘述。接下来通过一个简单的示例来介绍这些方法的使用过程。
示例5-5 添加集合对象中的模型
1.功能描述
首先，定义两个数组对象stumodels和newmodels，前者用于定义集合对象时注入的原始数据，后者用于集合对象调用添加方法新增模型对象时的数据。实例化一个集合对象stus，然后，分别调用unshift、add、push方法向集合对象stus中添加模型对象。最后，遍历整个添加模型对象之后的数据，以JSON格式在浏览器的控制台中输出各个模型对象的内容。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
}
});
var stumodels = [{
Code: "10101",
Name: "刘真真",
Score: 530
}, {
Code: "10102",
Name: "张明基",
Score: 460
}, {
Code: "10103",
Name: "舒虎",
Score: 660
}, {
Code: "10104",
Name: "周小敏",
Score: 500
}, {
Code: "10105",
Name: "陆明明",
Score: 300
}, {
Code: "10106",
Name: "占小方",
Score: 380
}, {
Code: "10107",
Name: "陈天豪",
Score: 720
}];
var newmodels = [{
Code: "10108",
Name: "李煜",
Score: 570
}, {
Code: "10109",
Name: "钟舒畅",
Score: 460
}, {
Code: "10110",
Name: "佟明月",
Score: 680
}];
var stus = new Backbone.Collection(stumodels,{
model:student
});
//在头部位置插入模型对象
stus.unshift(newmodels[1]);
//在索引号为5的位置插入模型对象
stus.add(newmodels[0],{at:5});
//在尾部位置插入模型对象
stus.push(newmodels[2]);
//重新输出全部的模型对象
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}2.源码分析
从上图中可以看出，有下划线的数据都是新添加的。首先，使用unshift方法在头部位置插入模型对象时，便添加了Code属性值为10109的模型对象；然后集合对象stus内部重置索引号，当调用add方法在集合对象索引号为5的位置插入模型对象，则添加Code属性为10108的模型对象；最后，调用集合对象的push方法向模型对象的尾部位置插入模型对象时，便添加Code属性值为10110的模型对象。
5.2.3 查找集合对象中的模型
上节介绍了如何在集合对象中删除和添加模型对象的方法，除此之外，还可以通过集合类中提供的get、at、findWhere、where方法，查找集合中的一个或多个模型对象，接下来详细地介绍这些方法的使用过程。
（1）get方法的功能是通过指定的ID号获取集合中的某一个模型对象，它的调用格式如下。
obj.get(id)
其中，obj为实例化后的集合对象，参数ID为模型对象在产生时的唯一标志，也是用于与服务器保持同步的唯一编号，它的正式名称为小写的ID，如果在构建模型对象类中，没有该属性，也可以通过idAttribute属性值指定其他数字类型的属性为id标志，一旦某属性被指定为id标志，它将过滤重复的属性值，不能增加与该属性值相同的模型对象。
（2）at方法的功能是通过指定的索引号获取集合中的某一个模型对象，它的调用格式如下。
obj.at(index)
其中，obj为实例化后的集合对象，参数index为集合对象中模型数据的索引号，该索引号以0开始，最大值为obj.models,length-1。
（3）findWhere方法的功能是查找与属性名称和属性值相匹配的第一个模型对象，调用格式如下。
obj.findWhere(attrs)
其中，除了obj为实例化后的集合对象外，参数attrs为key/value形式的属性值对象，attrs参数只能添加一个组key/value形式的属性值，多组属性值以最后一组为准。
（4） where方法的功能是查找与属性名称和属性值相匹配的第一个模型或多个模型对象。与findWhere方法相比，通过新增加的参数可以决定它查找时返回的对象模型数量，调用格式如下。
obj.where(attrs,first)
其中，参数attrs与findWhere方法的使用说明相同。而新增加的first参数是一个布尔类型的值，当该参数为true时，表示返回与属性名称和属性值相匹配的第一个模型对象，这时的功能与findWhere方法相同；而当该参数为false时，表示返回与属性名称和属性值相匹配的全部模型对象，是一个数组集合。
示例5-6 查找集合对象中的模型
1.功能描述
首先，以JSON格式输出集合中全部模型对象的内容，作为接下来查询操作的参考数据。然后，开始查询模型对象时，分别调用get、at、findWhere、where方法获取查询后的模型对象，并保存在不同变量中。最后，在浏览器的控制台分别以JSON格式输出这些变量的内容。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:""
},
idAttribute:"Code"
});
var stumodels = [{
Code: "10101",
Name: "刘真真",
Score: 530
}, {
Code: "10102",
Name: "张明基",
Score: 660
}, {
Code: "10103",
Name: "舒虎",
Score: 660
}, {
Code: "10104",
Name: "周小敏",
Score: 500
}, {
Code: "10105",
Name: "陆明明",
Score: 300
}, {
Code: "10106",
Name: "占小方",
Score: 380
}, {
Code: "10107",
Name: "陈天豪",
Score: 720
}];
var stus = new Backbone.Collection(stumodels,{
model:student
});
//输出全部的模型对象
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
console.log("---------------------------查询结果---------------------------");
//查找ID号为10106的对象模型
var find_id_model = stus.get(10106);
//查找索引号为6的对象模型
var find_at_model = stus.at(6);
//查找与属性名称和值相匹配的对象模型
var find_0_model = stus.findWhere({
Score:660
});
var find_1_model = stus.where({
Score:660
},true);
var find_2_model = stus.where({
Score:660
},false);
//以对象的形式输出模型内容
console.log(find_id_model.toJSON());
console.log(find_at_model.toJSON());
console.log(find_0_model.toJSON());
console.log(find_1_model.toJSON());
console.log("---------------------------数组结果---------------------------");
for(var i=0;i<find_2_model.length;i++){
console.log(find_2_model[i].toJSON());
}2.源码分析
首先使用集合对象的get方法查找集合对象中ID号为10106的模型对象。在模型类中通过idAttribute将Code属性值指定为ID号属性，因此get方法将查找Code属性值为10106的模型对象，执行效果如上图中查询结果区域的第一行所示。
然后，使用集合对象的at方法查找集合对象中索引号为6的模型对象，由于索引号是从0开始的，因此该方法将获取Code属性值为10107的模型对象，执行效果如上图中查询结果区域的第二行所示。
最后，使用集合对象的where方法匹配与给定属性名称和值相同的对象，尽管有两个对象的Score属性值为660，但由于where方法仅返回首个与给定条件相匹配的对象，因此，该方法将获取首个模型对象，即Code属性值为10102的模型对象，执行效果如上图中查询结果区域的第三行所示。
集合对象两次调用findWhere方法匹配与给定属性名称和值相同的对象。第一次调用时，将方法的第二次参数设置为true，表示只获取相匹配的首个模型对象，因此返回Code属性值为10102的模型对象，执行效果如上图中查询结果区域的第四行所示。
第二次调用时，将方法的第二个参数设置外false，表示只获取相匹配的模型对象集合，因此，通过遍历这个保存在查询结果find_2_model的变量，并以JSON格式输出全部的模型对象内容，执行效果如上图中查询结果区域的第五、六行所示。
5.2.4 集合中模型对象的排序
在上一节中介绍了如何查询集合中的模型对象，此外，集合类还提供了对集合中模型对象排序的功能，只需要调用sort方法，其调用格式如下。
obj.sort(options);
其中，obj为实例化后的集合对象，options参数为排序过程中的配置对象，在该对象中可以设置slient等属性。在集合对象调用sort方法之前，必须在实例化集合对象时添加一个名为“comparator”的方法。如果不添加该方法，可调用sort方法的话，会提示“Cannot sort a set without a comparator”异常信息。
在添加comparator方法时，需要设置两个参数model_1和model_2，分别对应两个相邻的模型对象。通过两个模型对象的排序属性值的比较，设置按该属性名称排序的顺序。如果按升序排列，当前者大于后者时，返回1值；如果按降序排列，当前者大于后者时，返回0值；当调用集合对象执行sort方法时，则按该返回值进行排序。
集合对象的sort方法功能十分强大，全部的排序操作功能都是自动完成的，且无论是新增或移除集合中的任意模型对象后，该方法又将自动被调用，对集合中的全部模型对象又将按照排序规则进行重新排序，以确定排序的延续性。接下来通过一个简单的示例来介绍该方法的使用过程。
示例5-7 集合中模型对象的排序
1.功能描述
首先，实例化集合对象stus时定义comparator方法，在该方法中，设定集合中模型对象按Score属性值的降序排列。然后，调用集合对象的sort方法进行排序，并将排序后的全部模型对象以JSON格式输出至浏览器的控制台中。最后，调用集合对象的remove方法先移除集合中索引号为3的模型对象，再调用add方法添加一个模型对象。经过这两次操作之后，再次将排序后的全部模型对象以JSON格式输出至浏览器的控制台中。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
},
idAttribute:"Code"
});
var stumodels = [{
Code: "10101",
Name: "刘真真",
Score: 530
}, {
Code: "10102",
Name: "张明基",
Score: 460
}, {
Code: "10103",
Name: "舒虎",
Score: 660
}, {
Code: "10104",
Name: "周小敏",
Score: 500
}, {
Code: "10105",
Name: "陆明明",
Score: 300
}, {
Code: "10106",
Name: "占小方",
Score: 380
}, {
Code: "10107",
Name: "陈天豪",
Score: 720
}];
var stus = new Backbone.Collection(stumodels,{
model:student,
comparator:function(model_1,model_2){
var intcomp = model_1.get("Score")>model_2.get("Score");
return intcomp?0:1;
}
});
stus.sort();
//增加和删除模型前排序输出全部的模型对象
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}
stus.remove(stus.models[3]);
stus.add({
Code:"10108",
Name:"李昱",
Score:570
});
console.log("---------------排序结果---------------");
//增加和删除模型后排序输出全部的模型对象
for(var i=0;i<stus.models.length;i++){
console.log(stus.models[i].toJSON());
}2.源码分析
从上图中可以看出，无论是删除集合中索引号为3的模型对象，还是向集合中添加一个新的模型对象，首次排序的规则依然不变化。当集合对象在删除或增加一个模型对象时，会自动再次调用排序规则的comparator方法，重新按规定的规则进行模型排序，执行效果图上图所示。
注意：
集合对象的sort方法功能虽然强大，但在使用过程中需要注意两个问题。
第一是执行效率，由于每一次的集合模型对象变化都会引发重新排序，如果展示的集合对象数量很大，这会导致在排序的时候执行效率变得很慢，建议这个方法不要针对大量模型对象使用。
第二是屏蔽其他按位置插入或删除模型对象的功能，即如果调用了集合对象中的sort方法，前面小节中所介绍的按at属性值插入或删除模型对象的功能将会无效。
5.3 与服务器交互集合中的模型对象
在Backbone中，集合中的模型对象与上一章中的模型对象一样，都可以调用内容提供的方法与服务器进行交互。集合类中提供了fetch和create两个方法与服务器进行数据交互，fetch方法用于从服务器接口获取集合对象初始化的数据，create方法用于将创建好的集合对象中的全部模型对象数据发送到服务器，完成数据同步的功能。
5.3.1 调用fetch方法获取服务器数据
与数据模型对象类似，集合对象也可以通过调用本身类中提供的fetch方法与服务器进行交互， 获取服务器返回的数据，其调用格式如下所示。
obj.fetch(options)
其中，参数obj为集合对象，options为与服务器进行交互过程的配置对象。在该对象中，可以添加success方法，表示当与服务器交互成功后将会调用该方法。此外，当集合对象与服务器的数据交互成功，即调用了自定义的success方法时，还会触发集合对象的reset事件。但该事件不会自动触发，需要在fetch方法的options对象中将reset属性值设置为true，否则不会触发。在该事件中，可以进一步对获取的数据进行下一步的操作，例如显示在页面或进行存储。接下来通过一个简单的示例介绍该方法的使用过程。
示例5-8 调用fetch方法获取服务器数据
1.功能描述
首先，采用extend方法构建一个名为stulist的集合类，并在该类的构造函数initialize中，使用on方法绑定类别对象的rest事件。当触发该事件时，将遍历传回的数据集合，并以JSON格式在浏览器的控制台输出全部模型对象。此外，在集合类中设置url属性，用于设置与服务器请求时的路径。
然后，实例化一个名为stus的集合对象，并调用fetch方法与服务器进行数据交互，在调用fetch方法过程中，为了能够在成功获取服务器数据时触发reset事件，必须将reset属性值设置为true。此外，添加success方法，当成功获取服务器数据时，将会执行该方法中的代码将获取的数据进行遍历，并以JSON格式的方式输出全部的模型对象。
var student = Backbone.Model.extend({
defaults:{
Code:"",
Name:"",
Score:0
}
});
var stulist = Backbone.Collection.extend({
initialize:function(){
console.log("-----reset事件触发-----");
this.on("reset",function(render){
for(var i=0;i<render.models.length;i++){
console.log(render.models[i].toJSON());
}
});
},
model:student,
url:"../servlet/StudentListServlet"
});
var stus = new stulist();
stus.fetch({
reset:true,
success:function(collection,resp,options){
console.log("-----请求成功时触发-----");
for(var i=0;i<collection.models.length;i++){
console.log(collection.models[i].toJSON());
}
}
});2.源码分析
从上图中可以看出，当请求定义的url属性值获取数据时，如果在fetch()方法中将reset属性值设为true，当数据获取成功时，会优先触发已绑定的reset事件。在该事件中，通过返回的集合对象参数，可以获取服务器中全部的模型对象数据；当完成reset事件触发之后，再执行success方法，在该方法中，同样也可以返回对象参数，获取服务器中的模型对象数据。
5.3.2 调用create方法与服务器同步数据
在Backbone中，集合对象的create方法与模型对象的save方法相似，都是向服务器发送模型对象，进行数据同步操作。而集合对象在调用create方法时，先根据对象本身所依附的模型类新建一个模型对象，当与服务器数据同步成功后，再将该新建的模型对象添加至集合对象中。create方法的调用格式如下所示。
obj.create(model,options)
其中，参数obj为集合对象，model参数为发送给服务器的模型对象，参数options则为发送时的方法配置对象。
在集合对象调用create方法过程中，会使用POST和PUT两种请求方法向服务器发送数据，前者表示创建模型对象，后者则为修改模型对象。此外，集合对象调用create方法后，如果绑定集合对象的add事件，还会自动触发该事件。
另外，在集合对象调用create方法时，可以通过方法的配置对象设置一些与发送相关的属性，如添加success方法和wait、silent属性，用于控制客户端与服务器同步过程中的一些操作。此外，当集合对象调用create方法向服务器发送数据时，会通过模型内容的isNew方法检测数据是否是新建还是更新，如果是新建，会使用POST方式，否则使用PUT方式。接下来分别进行说明。
示例5-9 POST和PUT方式发送数据
1.功能描述
首先定义一个名为student的模型类，使用defaults属性设置默认的属性项。然后使用extend方式定义一个名为stulist的集合类,在定义集合类时，使用model属性设置所依附模型类的名称，url属性设置与服务器同步数据的地址。最后实例化一个名为stus的集合对象，调用该对象的create方法向服务器发送模型对象，进行数据同步。
var student = Backbone.Model.extend({
defaults:{
Code:"10001",
Name:"张三",
Score:100
}
});
var stulist = Backbone.Collection.extend({
model:student,
url:"../servlet/Servlet5_9"
});
var stus = new stulist();
stus.create({
Code:"10107",
Name:"皮卡丘",
Score:750
});2.源码分析
从上图可以看出，当客户端以POST方式向服务器发送模型对象时，服务器成功返回200，表示请求成功，也成功向客户端返回了JSON格式的code值。由于本地客户端在发送对象模型时并未指定模型的ID号，则以POST方式向服务器发送数据，表示创建模型对象。如果在发送数据时指定了模型ID号，则将以PUT方式向服务器发送数据。将示例5-9模型类进行如下代码修改。
var student = Backbone.Model.extend({
defaults:{
Code:"10001",
Name:"张三",
Score:100
},
idAttribute:"Code"
});上述代码中在定义模型类时，通过idAttribute指定模型的ID号属性名称为Code，因此，在调用集合对象的create方法创建并发送模型对象时将携带ID号，即Code属性值一并发送。此时，发送的方式为PUT，表示更新模型对象。最终在控制台输出效果如上。从上图中可以看出，当使用PUT方式向服务器发送数据时，请求的URL地址后面自动添加发送的模型对象的ID号，此时的数据发请求为更新模型对象。
注意：
无论使用哪种方法向服务器发送数据，都会将已同步的模型对象数据添加到集合对象中。因为在调用集合对象的create方法时，如果绑定集合对象的add事件，将会自动触发。在该事件中，可以通过调用集合对象，查看全部已发送的模型对象数据。
示例5-10 触发集合的add事件
1.功能描述
在本示例中，当定义集合类时，在构造函数中绑定名为“add”的添加模型对象事件。当集合对象在添加模型对象时，将会触发该事件。在该事件中，将在浏览器的控制台以JSON格式输出添加的模型对象内容。
var student = Backbone.Model.extend({
defaults:{
Code:"10001",
Name:"张三",
Score:100
},
idAttribute:"Code"
});
var stulist = Backbone.Collection.extend({
initialize:function(){
this.on("add",function(model,response,options){
console.log(stus.models[0].toJSON());
});
},
model:student,
url:"../servlet/Servlet5_9"
});
var stus = new stulist();
stus.create({
Code:"10107",
Name:"皮卡丘",
Score:750
});2.源码分析
当集合对象stus调用create方法完成与服务器数据交之后，由于向集合对象stus自动添加了与服务器同步的模型对象，触发绑定的add事件，根据返回的model参数获取已发送的模型对象，并以JSON的格式在浏览器的控制台输出。详细效果如上图第一行。
在前面提到过，当一个集合对象在通过调用create方法完成与服务器数据同步之后，默认情况下，会自动将已同步后的模型对象添加到这个集合对象中。但也可以通过设置create方法中配置对象（options）的属性值来改变这个默认过程。
当调用create方法并将配置对象的wait属性值设为true时，表示只有当客户端与服务器数据成功同步之后，才能将发送的模型对象添加至集合对象中。如果将wait属性值设为false或不添加该属性时，则直接将发送的模型对象添加至集合对象中。
此外，当silent属性值设置为true时，表示不管客户端与服务器是否成功完成同步数据的操作，都会将发送的模型对象添加至集合对象中。如果将silent属性值设为false或不添加该属性时，只有当客户端与服务器成功完成数据同步之后，才会将发送的模型对象添加至集合对象中。
示例5-11 设置wait和silent属性
1.功能描述
本示例与示例5-10相比，首先修改集合类中url属性，将该属性值修改为一个不能正确请求的url地址。其次，在集合对象调用的create方法中，通过第二个参数——配置对象添加wait属性和success方法，并将wait属性值设置为true，在success方法中，将服务器返回的JSON格式值输出至浏览器的控制台中。如果不添加wait属性或将wait属性值设置为false时，浏览器控制台输出的结果又不相同。
var student = Backbone.Model.extend({
defaults:{
Code:"10001",
Name:"张三",
Score:100
},
idAttribute:"Code"
});
var stulist = Backbone.Collection.extend({
initialize:function(){
this.on("add",function(model,response,options){
console.log(stus.models[0].toJSON());
});
},
model:student,
url:"../servlet/Servlet115_9"
});
var stus = new stulist();
stus.create({
Code:"10107",
Name:"皮卡丘",
Score:750
},{
wait:false,
success:function(model,response,options){
console.log(response.changed.code);
}
});
2.源码分析
由于与服务器的数据同步地址异常，无法完成客户端与服务器的数据同步操作，因此浏览器返回404代码。此外，在调用create方法时，通过配置对象添加了wait属性，并将该属性值设置为true，表示只有当客户端与服务器成功完成数据同步之后，才会将同步的模型对象数据添加至集合对象中。因此，同步数据异常时进行数据添加操作，也不会触发绑定的集合对象的add事件。效果如上图所示。
集合对象在调用create方法时，不添加wait或将该属性的值设置为false时，表示不管客户端与服务器的数据是否同步成功，都会将同步的模型对象数据添加至集合对象中。因此，将触发集合对象绑定的add事件，在浏览器的控制台中输出同步的模型对象，效果如图所示。
除了在create方法的配置对象中添加wait属性外，还可以添加silent属性，但它们的作用正好相反。如果添加silent属性并将该属性值设置为true，属于静默式同步，不需要客户端与服务器数据同步成功，就可以向集合对象添加模型数据，与不添加wait属性或将该属性值设置为false时的效果一样。
此外，当集合对象调用create方法并成功与服务器同步数据时，将会执行配置对象中添加的success方法。在该方法中，可以通过返回的changed对象获取服务器传回的code值。
扫一扫
2392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
