Backbone.Paginator無限模式，帶木偶

Question

在我的木偶應用程序中，我有一個Collection視圖，其模型爲childView。

分配給CollectionView的集合是從Backbone.paginator開始的PageableCollection。該模式設置爲infinite。

當請求如getNextPage()這樣的下一個頁面時，該集合正在獲取數據併爲該集合分配響應，覆蓋舊的條目，儘管完整版存儲在collection.fullCollection中。這是我可以找到CollectionView需要呈現的所有條目。

木偶在收集活動方面很聰明，並且在將模型添加到收藏時將使用新模型呈現新的childView。當模型被移除時，它也將刪除childView。

但是，這不是我想要做的，因爲collection並不代表我想要的渲染列表，因此我想在頁面上顯示collection.fullCollection。

有沒有辦法讓我的Marionette視圖考慮collection.fullCollection而不是collection，還是有更合適的Marionette分頁框架？

Here's a fiddle with the code

對於那些誰不喜歡小提琴：

App = Mn.Application.extend({}); 

// APP 
App = new App({ 
    start: function() { 
    App.routr = new App.Routr(); 
    Backbone.history.start(); 
    } 
}); 

// REGION 
App.Rm = new Mn.RegionManager({ 
    regions: { 
    main: 'main', 
    buttonRegion: '.button-region' 
    } 
}); 

// MODEL 
App.Model = {}; 
App.Model.GeneralModel = Backbone.Model.extend({}); 

// COLLECTION 
App.Collection = {}; 
App.Collection.All = Backbone.PageableCollection.extend({ 
    model: App.Model.GeneralModel, 

    getOpts: function() { 
    return { 
     type: 'POST', 
     contentType: 'appplication/json', 
     dataType: 'json', 
     data: {skip: 12}, 
     add: true 
    } 
    }, 

    initialize: function() { 

    this.listenTo(Backbone.Events, 'load', (function() { 
     console.log('Load more entries'); 

     // {remove: false} doesn't seem to affect the collection with Marionette 
     this.getNextPage(); 
    })).bind(this) 

    }, 

    mode: "infinite", 

    url: "https://api.github.com/repos/jashkenas/backbone/issues?state=closed", 

    state: { 
    pageSize: 5, 
    firstPage: 1 
    }, 

    queryParams: { 
    page: null, 
    per_page: null, 
    totalPages: null, 
    totalRecords: null, 
    sortKey: null, 
    order: null 
    }, 

    /* 
    // Enabling this will mean parseLinks don't run. 
    sync: function(method, model, options) { 
    console.log('sync'); 

    options.contentType = 'application/json' 
    options.dataType = 'json' 
    Backbone.sync(method, model, options); 
    } 
    */ 

}); 

// VIEWS 
App.View = {}; 
App.View.MyItemView = Mn.ItemView.extend({ 
    template: '#item-view' 
}); 

App.View.Button = Mn.ItemView.extend({ 
    template: '#button', 
    events: { 
    'click .btn': 'loadMore' 
    }, 
    loadMore: function() { 
    Backbone.Events.trigger('load'); 
    } 
}); 

App.View.MyColView = Mn.CollectionView.extend({ 
    initialize: function() { 
    this.listenTo(this.collection.fullCollection, "add", this.newContent); 
    this.collection.getFirstPage(); 
    }, 

    newContent: function(model, col, req) { 
    console.log('FullCollection length:', this.collection.fullCollection.length, 'Collection length', this.collection.length) 
    }, 

    childView: App.View.MyItemView 
}); 

// CONTROLLER 
App.Ctrl = { 
    index: function() { 
    var col = new App.Collection.All(); 
    var btn = new App.View.Button(); 
    var colView = new App.View.MyColView({ 
     collection: col 
    }); 

    App.Rm.get('main').show(colView); 
    App.Rm.get('buttonRegion').show(btn); 
    } 
}; 

// ROUTER 
App.Routr = Mn.AppRouter.extend({ 
    controller: App.Ctrl, 
    appRoutes: { 
    '*path': 'index' 
    } 
}); 

App.start(); 

Answer 1

你可以立足CollectionView關閉全部收集和分頁集合中傳遞作爲一個單獨的選項：

App.View.MyColView = Mn.CollectionView.extend({ 
    initialize: function(options) { 
    this.pagedCollection = options.pagedCollection; 
    this.pagedCollection.getFirstPage(); 

    this.listenTo(this.collection, "add", this.newContent); 
    }, 

    // ... 
} 

// Create the view 
var colView = new App.View.MyColView({ 
    collection: col.fullCollection, 
    pagedCollection: col 
}); 

Forked fiddle