Backbone.js的集合详解(上)

《Backbone.js的集合详解(上)》

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

Backbone.js的集合只是一个简单的有序集的模型。通过适应模型和集合，我们可以避免数据处理逻辑放到了我们的视图层。此外，模型和集合还提供了便利的与后端一起工作的方法，当数据发生变化时，可以自动化地标记Backbone.js视图。这样，它可以用于如下的情况：

Model: Animal, Collection: Zoo

通常情况下你的集合只适应一种模型，但模型本身并不局限于集合的类型。

Model: person, Collection: OfficeModel: person, Collection: Home

下面是常见的模型/集合的例子：

var Music = Backbone.Model.extend({      initialize: function(){          console.log("Welcome to the music world");      }});var Album = Backbone.Collection.extend({    model: Music});

上面的代码告诉我们如何创建集合。但是它没有告诉我们用数据操纵集合的过程。因此，让我们探索这个过程：

var Music = Backbone.Model.extend({        defaults: {            name: "Not specified",            artist: "Not specified"        },        initialize: function(){            console.log("Welcome to the music world ");    }    });    var Album = Backbone.Collection.extend({        model: Music    });    var music1 = new Music ({ id: 1 ,name: "How Bizarre", artist: "OMC" });    var music 2 = new Music ({id: 2,  name: "What Hurts the Most", artist: “Rascal Flatts" });    var myAlbum = new Album([music 1, music 2]);    console.log( myAlbum.models ); 

下面我们来看看Backbone.js的集合和其它组件的关系：

 

一、添加模型到集合

正如我们所知的那样，集合是模型的集合。因此，我们可以在集合上添加模型。要添加模型到集合，我们可以使用add方法。我们还可以添加模型到集合的开始——通过使用unshift方法。

var music3 = new Music({ id: 3, name: "Yes I Do",artist:“Rascal Flatts"  });Music.add(music3);console.log('New Song Added');console.log(JSON.stringify(Music));

二、从集合中移除模型

很多时候，我们会有从集合中移除一些指定的数据这样的需求。要从集合中移除模型，我们需要提供模型的id。如果我们想用一个完整的新数据集替换原集合，我们可以使用reset方法。

Music.remove(1);console.log('How Bizarre removed...');console.log(JSON.stringify(Music));

三、Get和Set

如果我们需要从代码其它地方的集合中获取一个值，那么可以直接使用get方法。此时，我们向带检索的模型传递ID值。

console.log(JSON.stringify(Music.get(2)));

集合的set方法有一个有趣的实现。set方法通过传递模型列表，执行集合的“智能”更新。如果列表中的模型还不在集合中，那么会添加到集合。如果模型已经在集合中，那么它的属性会被合并。如果集合包含了不属于列表的任意模型，那么这项模型会被移除。

var Music = Backbone.Model.extend({         // This attribute should be set as a default        defaults: {            Name: ''        },        // Set the id attribute so that the collection                 idAttribute: 'id'    });    var song = Backbone.Collection.extend({        model: Music    });    var models = [{        Name: 'OMC',        id: 1    }, {        Name: 'Flatts',        id: 2    }];    var collection = new song(models);    collection.bind('add', function (model) {        alert('addb')    });    collection.bind('remove', function () {        alert('add')    });    models = [{        Name: 'OMC',        id :1    }, {        Name: 'Flatts',        id: 2    }, {        Name: ' Jackson ',        id: 3    }];    collection.add(models);});

正如我们在上面所看到的那样，事前我们已经有2个模型了，当我们添加第3个模型时，早先的模型保持不变。