Marionette.js - 劫持CompositeView函数以创建流分页

Question

我正在创建一个流分页视图列表.我们使用空集合启动应用程序,并定期向集合中添加项目.当集合的大小通过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的复合视图呢？似乎我覆盖了Marionette的collectionView的大部分功能,以获得我想要的东西.

每次我的集合中的项目数量发生变化时,需要更新两件事:

• 集合视图中的itemViews
• 复合视图底部的页码

Answer 1

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

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

例如，以下是我设置过滤的方法（在此处的 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（它直接从它扩展），它允许您围绕集合渲染模型/模板。这是主要的区别......它们都处理集合，并呈现该集合中的视图列表。