backbone.js - Marionette.js - 劫持 CompositeView 函数来创建流式分页

Question

我正在创建一个流式分页 View 列表。我们使用空集合启动应用程序，并定期将项目添加到集合中。当集合的大小传递 page_size 属性时，模型的其余部分不应被渲染，但compositeView 应添加页码以供单击。

我计划为我的compositeView创建一个渲染函数，该函数仅根据当前页面#和页面大小渲染项目，方法是在我的集合中有一个返回模型列表的函数，如下所示:

get_page_results: function(page_number){
    var all_models = this.models;

    var models_start = page_number * this.page_size;
    var models_end = models_start + this.page_size;

    //return array of results for that page
    return all_models.slice(models_start,models_end);
}

我的问题是，我是否应该使用 Marionette 的复合 View 来实现此目的？似乎我覆盖了 Marionette 的 collectionView 的大部分功能以获得我想要的东西。

每次我的收藏中的项目数量发生变化时，都需要更新两件事:

• Collection View 中的 itemView
• 复合 View 底部的页码

Answer 1

我强烈建议不要在 View 层中执行此操作。您将向 View 中添加大量代码，并且最终将在多个 View 之间复制大量代码(一个用于显示数据，一个用于页面列表和计数，一个用于... )。

相反，使用装饰器模式来构建一个知道如何处理这个问题的集合。我这样做是为了过滤、排序和分页数据，效果非常好。

例如，以下是我设置过滤的方法(在此处的 JSFdiddle 中运行: http://jsfiddle.net/derickbailey/vm7wK/ )

function FilteredCollection(original){
    var filtered = Object.create(original);

    filtered.filter = function(criteria){
        var items;
        if (criteria){
            items = original.where(criteria);
        } else {
            items = original.models;
        }
        filtered.reset(items);
    };        

    return filtered;
}

var stuff = new Backbone.Collection();

var filtered = FilteredCollection(stuff);
var view = Backbone.View.extend({
    initialize: function(){
        this.collection.on("reset", this.render, this);
    },

    render: function(){
        var result = this.collection.map(function(item){ return item.get("foo"); });
        this.$el.html(result.join(","));
    }
});

就您而言，您不会像这样进行过滤...但分页和流式传输的想法是相同的。

您可以在“PagingCollection”中跟踪您所在的页面，然后当您的原始集合被重置或添加新数据时，PagingCollection 函数将重新计算最终 pagedCollection 中需要包含哪些数据实例，并使用您需要的数据重置该集合。

类似这样的东西(尽管这未经测试且不完整。您需要填写一些详细信息并充实它以满足您的应用程序的需求)

function PagingCollection(original){
    var paged = Object.create(original);
    paged.currentPage = 0;
    paged.totalPages = 0;
    paged.pageSize = 0;

    paged.setPageSize = function(size){
      paged.pageSize = size;
    };

    original.on("reset", function(){
      paged.currentPage = 0;
      paged.totalPages = original.length / paged.pageSize;
      // get the models you need from "original" and then
      // call paged.reset(models) with that list
    });

    original.on("add", function(){
      paged.currentPage = 0;
      paged.totalPages = original.length / paged.pageSize;
      // get the models you need from "original" and then
      // call paged.reset(models) with that list
    });

    return paged;
}

用分页信息装饰集合后，您可以将分页集合传递给 CollectionView 或 CompositeView 实例。这些将正确渲染您传递给它的集合中找到的模型。

关于 CollectionView 与 CompositeView ... CompositeView 是一个 CollectionView(它直接从它扩展而来)，它允许您围绕集合渲染模型/模板。这是主要的区别...它们都处理集合，并呈现该集合中的 View 列表。