Backbone.Paginator无限模式，Marionette

Question

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

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

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

Marionette 对集合事件很聪明，当模型被添加到集合中时，将用它的新模型呈现一个新的 childView。当它的模型被删除时，它也会删除 childView。

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

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

Here's a fiddle with the code

对于那些不喜欢fiddle的人：

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

Backbone.Paginator无限模式，Marionette

Backbone.Paginator infinite mode, with Marionette

javascript

pagination

backbone.js

backbone.paginator

marionette