2

在我的 Marionette 应用程序中，我有一个 Collection 视图，其中包含一个childViewfor it's models。

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

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

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

但是，在这种情况下，这并不是我想要做的，因为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();
4

1 回答 1

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

分叉的小提琴

于 2015-11-14T17:38:58.487 回答