backbone学习笔记(4)- Collection

Posted by luoway on December 13, 2015

模型集合Collection是依附于基类的另外一个数据集合类,它的功能是管理和存储有模型衍生的数据集合。 如果从数据库的角度来看,一个实例化后的Model对象好像表中的一条记录。而一个实例化后的Collection对象则是一张数据集合表,可以在这表中进行一系列的增加、删除、修改、查询的操作。还可以与服务器进行数据同步,批量更新和获取数据。

创建集合对象

1.自定义集合类,实例化集合对象

自定义一个集合类stulist,设置依附于本类的数据模型model属性值。
当实例化一个集合类对象,并向该对象添加数据时,集合类会自动创建model属性值指定的数据模型,并将这些对象数据存储至数据模型models属性中。

var student = Backbone.Model.extend({
    defaults:{
        Code:''
    }
});
var stumodels = [
    {Code:'1'},
    {Code:'2'},
    {Code:'3'}];
//自定义集合类
var stulist = Backbone.Collection.extend({
    model:student
});
//实例化集合对象
var stus = new stulist(stumodels);
for(var i = 0; i < stus.models.length; i++){
    console.log(stus.models[i].toJSON());
}   //{Code:'1'},{Code:'3'}

2.直接实例化集合对象

在定义集合对象stus的过程中,第一个参数为添加的模型数据,第二个参数为配置对象,通过该参数添加并设置model属性值。结果是获得模型实例对象。

var student = Backbone.Model.extend({
    defaults: {
        Code: ''
    }
});
var stumodels = [
    {Code:'1'},
    {Code:'2'},
    {Code:'3'}];
//直接实例化集合对象
var stus = new Backbone.Collection(stuModels,{
    model: student
});
for(var i = 0; i < stus.models.length; i++){
    console.log(stus.models[i].toJSON());
}   //{Code:'1'},{Code:'2'},{Code:'3'}

· 自定义集合方法

var student = Backbone.Model.extend({
    defaults:{
        Code:''
    }
});
var stumodels = [
    {Code:'1'},
    {Code:'2'},
    {Code:'3'}];
var stulist = Backbone.Collection.extend({
    model:student,
    odd: function(){
        return this.filter(function(stu){
            return stu.get('Code')%2 == 1;
        });
    }
});
var stus = new stulist(stumodels);
var stuo = stus.odd();
for(var i = 0; i < stuo.length; i++){
    console.log(stuo[i].toJSON());
}//{Code:'1'},{Code:'3'}

操作集合中的模型对象

  1. obj.add( models, options ):向集合对象中指定的位置插入模型对象,如未指定,默认为集合对象的尾部。

  2. obj.unshift/push( models, options ):向集合对象中头部/尾部插入模型对象。

  1. obj.remove( models, options ):models为一个或多个模型对象,options为配置对象,可以设置silent属性等。

  2. obj.shift/pop( options ):移除集合对象中首/末位置的模型对象,

  1. obj.get(id):通过指定的ID号获取某个模型对象,要求ID不重复。
  2. obj.at(index):通过指定的索引号获取某个模型对象。
  3. obj.findWhere(attrs):查找与属性名称和属性值相匹配的第一个模型对象,attrs形如{key: value}
  4. obj.where(attrs, first):查找与属性名称和属性值相匹配的第一个或多个模型对象。通过设置first为布尔值确定返回第一个模型对象,还是多个模型对象的数组集合。


由于实例化后的集合对象为独立的对象,对象的内容不是引用传值的,因此操作集合中的模型对象需根据需要对集合中的对象进行直接修改(赋值)或间接修改(删除、添加)。

排序

obj.sort(options)

其中obj为实例化后的集合对象,options为排序过程中的配置对象。 排序所使用的规则必须在实例化集合对象时添加comparator方法:

var stus = new Backbone.Collection( stuModels, {
    model: student,
    comparator: function( model_1, model_2 ){
        return model_1.get('Score') > model_2.get('Score') ? 0: 1
    }   //1交换位置,0不变
});
stus.sort();

综合示例:

var student = Backbone.Model.extend({
    defaults:{
        Code: '',
        Score: 0
    },
    idAttribute: "Code"
})
var stuModels = [{
    Code: '1',
    Score: 99
},{
    Code: '2',
    Score: 95
}];
var stus = new Backbone.Collection(stuModels, {
    model: student,
    comparator: function( model_1, model_2 ){
        return model_1.get('Score') > model_2.get('Score') ? 0: 1
    }   //1交换位置,0不变
});
console.log(stus.toJSON());
console.log('增');//增
stus.add({ Code:'3', Score:80 }, {at:1});
console.log(stus.toJSON());
stus.unshift({ Code:'4', Score:79 }, {at:1});
console.log(stus.toJSON());
stus.push({ Code:'5', Score:75 }, {at:1});
console.log(stus.toJSON());
console.log('删');//删
stus.remove({ Code:'3', Score:80 });
console.log(stus.toJSON());
stus.shift();stus.pop();
console.log(stus.toJSON());
console.log('查');//查
console.log( stus.get('4').toJSON() );
console.log( stus.at(1).toJSON() );
console.log( stus.findWhere({Score:79}).toJSON() );
console.log( stus.where({Score:79}, false)[0].toJSON() );
console.log('改');//改
stus.models[1].attributes.Score = 80;
console.log( stus.models[1].toJSON() );
stus.models[1].set({Score:90});
console.log( stus.models[1].toJSON() );
console.log('排序');//排序
console.log(stus.toJSON());
stus.sort();
console.log(stus.toJSON());

与服务器交互集合中的模型对象

调用create方法与服务器同步数据:
与模型对象的save方法相似,都是向服务器发送模型对象,进行数据同步操作。而集合对象在调用create方法时,先根据对象本身所依附的模型类新建一个模型对象,当与服务器数据同步后,再将该新建的模型对象添加至集合对象中。create方法调用格式:

obj.create(model, options)

其中obj为集合对象,model参数为发送给服务器的模型对象,参数options则为发送时的方法配置对象。

设置waitsilent属性:
wait: true表示只有当客户端与服务器成功完成数据同步后,才会将同步的模型对象数据添加至集合对象中。
silent:true表示静默式同步,不需要客户端与服务器数据同步成功,就可以向集合对象添加模型数据,与不添加wait属性或将该属性的值设置为false时的效果一样。
成功同步数据时会执行配置对象中添加的success方法。

stus.create({
    Code:'1',
    Score:100
},{
    wait: true,
    success: function( model, response, options ){
        console.log(response.changed.code);
    }
});