在backbone.marionette 中使用collection.fetch() 进行分页

Question

我正在尝试使用backbone.marionette 实现分页 复合视图首先进行初始提取：

collection.fetch({reset: true})

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

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

已使用。

我在每次使用带有 {reset: false} 的 fetch() 时都看到了这一点 触发多个添加事件（对于添加的每个模型。） 基本上没问题，但是在查看带注释的源时 在木偶中的compositeView的appendHtml函数如下 声明：

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

虽然这对于初始提取非常有用（仅 1 个浏览器重排），但每个 随后使用 {reset: false} 获取可能会变得非常昂贵 （在添加的每个模型上回流）。真的好像 每次都 append() itemView - 导致回流 （compositeView.isBuffering 为假）。

有没有办法“批量”处理模型并进行一次插入 （与重置事件相同）？

这是否需要在 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）。

基本上：您向视图提供“分页集合”，分页集合的作用是：

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

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

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

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