Backbone.Paginator бесконечный режим, с марионетками

Question

В моем приложении Marionette, у меня есть представление коллекции, с childView для его моделей.

Коллекция, присвоенная CollectionView это PageableCollection от Backbone.paginator, Режим установлен на infinite,

При запросе следующей страницы вот так getNextPage()коллекция извлекает данные и присваивает ответ коллекции, перезаписывая старые записи, хотя полная версия сохраняется в collection.fullCollection, Здесь я могу найти все записи, которые CollectionView необходимо сделать.

Марионетка умна в отношении коллекционных событий и сделает новый childView с его новой моделью, когда модель добавляется в коллекцию. Это также удалит childView когда его модель была удалена.

Тем не менее, это не совсем то, что я хочу сделать в этом случае, так как collection не соответствует моему желаемому списку, collection.fullCollection это то, что я хочу показать на странице.

Есть ли способ, чтобы мой взгляд на Марионетку collection.fullCollection вместо collectionили есть более подходящая структура разбиения на страницы для марионеток?

Вот скрипка с кодом

Для тех, кто не любит скрипку:

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
});

Разветвленная скрипка