在backbone.marionette中使用collection.fetch（）进行分页

Question

我正在尝试使用backbone.marionette来实现分页 compositeView首先进行初始提取：

collection.fetch({reset: true})

要将其他模型加载到同一个集合中，

collection.fetch({reset: false, remove: false})

被使用。

我在每次使用fetch（）时看到{reset：false} 多个添加事件被触发（对于每个添加的模型。） 这基本上很好，但在查看带注释的来源时 下面是牵线木偶中复合视图的appendHtml函数 声明如下：

  

缓冲发生在重置事件和初始渲染上   减少文档中插入的数量，这是很昂贵的。

虽然这对于初始提取（仅1次浏览器重排）非常有用，但每次都是如此 使用{reset：false}进行后续获取可能会非常昂贵 （对每个添加的模型进行回流）。它似乎真的 每次追加（）itemView - 导致重排 （compositeView.isBuffering为false）。

有没有办法“批处理”处理模型并执行单个插入 （与重置事件相同）？

这是否需要在appendHtml实现中进行覆盖 并自己实现批处理逻辑？

Answer 1

（我假设您不想使用Backbone.paginator，出于某种原因。如果不是这样，请使用插件;-D）。

您可以使用与此处使用的过滤集合类似的技术：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js#L2（https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13处的实例化）。

基本上：您为视图提供了一个“分页集合”，以及分页集合的作用是：

• 最初，返回原始集合的“克隆”副本
• 当您获取原始集合时，将“批处理”中提取的事件添加到克隆集合中，这将触发视图刷新（因为它正在侦听克隆的集合，而不是原始集合）

为了尽量减少回流，您可以尝试以下方法：

• 沉默集合侦听的事件（“添加”等）
• 添加一组模型后，创建仅包含新模型的集合视图的新实例
• 渲染新的集合视图（但不要在任何地方显示），并手动将newView.el附加到DOM中的正确位置
• 销毁newView

不幸的是，一旦你需要开始优化，你往往需要手工处理一堆事情......