Marionette集合分页

Question

我在设置分页时遇到了一些问题。

下面是我的实际代码：

  var Admin = Backbone.Model.extend();

  var AdminCollection = Backbone.Collection.extend({
    model: Admin,
    url: "/back/admin"
  });

  var RowView = Mn.ItemView.extend({
    tagName: "tr",
    template: _.template(AdminRowView)
  });

  var TableView = Mn.CompositeView.extend({
    childView: RowView,
    childViewContainer: "tbody",
    collection: new AdminCollection(),
    template: _.template(AdminTableView),
    initialize: function() {
      this.collection.fetch();
    }
  });

目标是在我的collection.models上使用slice()函数，并用切片集合刷新我的视图。(我更喜欢管理分页客户端)

我该怎么做呢？

Answer 1

如果在实例化时向视图提供集合，则Marionette会免费处理集合重置(请参阅here)。为此，您应该利用Promise Backbone.Collection.fetch返回。因此，例如，当您准备实例化TableView时，如下所示：

var tableView; 
var pageQty = 10;
var options = {
  collection: new AdminCollection(),
  paginatedCollection: []
};

options.collection.fetch().then(_.bind(function () {
  // The collection is guaranteed to be filled
  // Set up your paginated collection
  for (var i = 0; i < options.collection.length; i += pageQty) {
    options.paginatedCollection[i/pageQty] = 
      options.collection.models.slice(i, i + pageQty);
  }
  // Load your first page
  options.collection.reset(options.paginatedCollection[0]);
  // Submit both the first page collection and your paginatedCollection
  // to the view
  tableView = new TableView(options);
  tableView.render() // Append the tableView.el wherever you want
}, this));

此视图将在呈现时呈现集合的第一页。当您收到更改页面的指令时，只需这样做

this.collection.reset(this.options.paginatedCollection[newPageNumber]);

正如您在上面的源代码链接中所看到的，当您使用分页模型重置视图集合时，视图将删除现有行并呈现新模型。