Backbone.js的集合詳解(上)

版權聲明：本文為部落客chszs的原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/chszs/article/details/24374105

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

作者：chszs，轉載需注明。部落格首頁：

http://blog.csdn.net/chszs Backbone.js的集合隻是一個簡單的有序集的模型。通過适應模型和集合，我們可以避免資料處理邏輯放到了我們的視圖層。此外，模型和集合還提供了便利的與後端一起工作的方法，當資料發生變化時，可以自動化地标記Backbone.js視圖。這樣，它可以用于如下的情況：

Model: Animal, Collection: Zoo           

通常情況下你的集合隻适應一種模型，但模型本身并不局限于集合的類型。

Model: person, Collection: Office
Model: 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個模型時，早先的模型保持不變。