Question

我对Marionette有一些问题要设定一个分页。

这是我的实际代码：

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

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

木偶系列分页

1 个答案: