Backbone.Paginator无限模式，带Marionette

Question

在我的Marionette应用程序中，我有一个集合视图，为它的模型提供了一个childView。

分配给CollectionView的集合是来自Backbone.paginator的PageableCollection。该模式被设置为infinite。

当请求像so getNextPage()这样的下一个页面时，集合将获取数据并将响应分配给集合，覆盖旧的条目，尽管完整的版本存储在collection.fullCollection中。在这里，我可以找到CollectionView需要呈现的所有条目。

木偶在收集事件上很聪明，当一个模型被添加到集合中时，它将使用它的新模型提供一个新的childView。当它的模型被删除时，它也会删除一个childView。

但是，在这种情况下，这并不是我想要做的，因为collection并不代表我想要的呈现列表，collection.fullCollection是我想在页面上显示的。

是否有办法让我的Marionette视图考虑collection.fullCollection而不是collection，或者是否有一个更适合Marionette的分页框架？

下面是对代码的修改

对于那些不喜欢小提琴的人：

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

叉形小提琴