gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:53:03 25 4
gpt4 key购买 nike

我正在创建一个流式分页 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 底部的页码

最佳答案

我强烈建议不要在 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 列表。

关于backbone.js - Marionette.js - 劫持 CompositeView 函数来创建流式分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14840423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com