如何使用 Backbone.Marionette 处理分页答案

【问题标题】：how to handle pagination with Backbone.Marionette如何使用 Backbone.Marionette 处理分页
【发布时间】：2012-07-17 08:51:19
【问题描述】：

我有一个使用外部 API 填充的集合，该 API 返回许多对象 + 更多对象的分页详细信息，然后我想在我的视图中可能只显示这些对象的一个子集，但允许进一步的分页视图也

为了更好地解释我的情况：

从服务器获取 20 个结果，获取更多页面的分页数据
显示 10 个结果 + 更多按钮
点击更多，显示 10 个结果 + 更多按钮
单击更多，从服务器获取 20 个结果，显示 10 个结果 + 更多按钮 ...

您的解决方案是什么？我找到了Backbone.Paginator，但我不知道它与 Marionette 的集成情况如何，或者是否已经存在 Backbone.Marionette.Paginator 扩展 :)

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

Backbone.Paginator 在 Backbone 集合之上提供了扩展和额外的方法和特性，这意味着它们应该可以从任何类型的 Backbone 视图中使用，包括 Marionette。

那么，您不需要做任何特别的事情来集成 Marionette 和 Paginator。您将构建一个利用附加方法和特性的视图，但您将基于 Marionette 的视图而不是标准的 Backbone 视图来构建该视图。在这种情况下，我会推荐 Marionette 的集合视图或复合视图，分别呈现分页集合中的每个项目。

【讨论】：

【解决方案2】：

这是我如何解决集成 Marionette 和backbone.paginator 的问题。从某种意义上说，这是“直截了当”的，但作为一个新来的骨干。牵线木偶它让我烦恼了一段时间！我希望这对某人有用。

使用compositeView 上的serializeData 方法从分页器的paginator_ui 对象中呈现信息。

/* a view for presenting a backbone.paginator collection,
 * and for presenting and handling its pagination UI element */
App.module('Views', function(Views, App, Backbone, Marionette, $, _) {
    Views.PaginatedCollectionView = Backbone.Marionette.CompositeView.extend({
        template: 'backbone/templates/paginated_collection_view',
        itemView: App.Views.StructureView,

        /* I'm not using a model, but you could if you
         * wanted? You might even merge the two */
        serializeData: function(){
          if (this.model){
            data = this.model.toJSON();
          } else {
            // we want to render the paginator_ui in our templates
            data = this.collection.paginator_ui;
          }

          return data;
        }
    });
});

【讨论】：