骨幹：從另一個集合中分片收集

Question

我希望獲得集合的分頁視圖。我嘗試使用Backbone.Paginator，但我無法使它工作。

我想我會自己做分頁，我認爲這將是一個好主意，讓我的完整集合，然後發送一個大集合的小集合，每次有人點擊'下一個'。

我想這樣做，但它不工作：

var purchaseCollection = new purchaseItemCollection({url:endpoints.purchases}); 

purchaseCollection.fetch(); 

var purchaseRangeCollection = new Backbone.Collection(purchaseCollection.models), 
    purchaseView = new purchaseItemCollectionView({collection:purchaseRangeCollection}); 

我的第二個集合僅僅是由一個模型的時候它應該有severals。

我想知道這是否是最好的辦法。

如何分割收集到集合，或如何以另一種方式做任何意見將真正理解！

Answer 1

您可以使用自定義對象來控制代表當前所選模型列表的集合。

例如，

var Slicer = function(opts) { 
    opts || (opts = {}); 

    // your big collection 
    this.collection = opts.collection || new Backbone.Collection(); 

    // a collection filled with the currently selected models 
    this.sliced = new Backbone.Collection(); 
}; 

_.extend(Slicer.prototype, Backbone.Events, { 
    // a method to slice the original collection and fill the container 
    slice: function(begin, end) { 
     var models = this.collection.models.slice(begin, end); 
     this.sliced.reset(models); 

     // triggers a custom event for convenience 
     this.trigger('sliced', this.sliced); 
    } 
}); 

你會再創建該控制器的一個實例，要麼聽取他們對這個對象上或在sliced收集reset事件自定義事件sliced更新您的看法：

var controller = new Slicer({ 
    collection: purchaseCollection 
}); 
controller.on('sliced', function(c) { 
    console.log('sliced', c.pluck('id')); 
}); 
controller.sliced.on('reset', function(c) { 
    console.log('reset', c.pluck('id')); 
}); 

並演示與http://jsfiddle.net/nikoshr/zjgkF/

注意THA玩你也必須考慮到fetch的異步性質，你不能立即在模型上工作。在這個設置中，你會做類似

var purchaseCollection = new purchaseItemCollection(
    [], // you have to pass an array 
    {url:endpoints.purchases} // and then your options 
); 
purchaseCollection.fetch().then(function() { 
    // do what you want 
    // for example 
    controller.slice(0, 10); 
}); 

Answer 2

您可以將完整收藏的model定義爲另一個獨立收藏。 然後在fetch()之後，您將獲得您的收藏作爲您的完整收藏的model。

var PurchaseCollection = Backbone.Collection.extend({ 
    model: Backbone.Collection 
}) 

var purchaseCollection = new PurchaseCollection({url:endpoints.purchases}); 
purchaseCollection.fetch() 

purchaseCollection.each(function (purchaseItem, index) { 
    //the purchaseItem is what you want... 
    //do anything... 
}); 

如果你想要demo, click here。

Answer 3

請記住，集合構造函數有兩個屬性（http://backbonejs.org/#Collection-constructor）。第一個是模型，第二個是url等選項。