Meteor 嵌入模板导致重新渲染答案

【问题标题】：Meteor embedded templates cause re-renderingMeteor 嵌入模板导致重新渲染
【发布时间】：2018-08-27 01:34:45
【问题描述】：

在单个页面上，我想显示一个编辑列表，并在每个编辑下分组，即来自该编辑的书籍列表。每个编辑有很多书，我有很多编辑，并且必须使用与该编辑相关的书籍得出的分数对编辑进行排序。例如，第一个编辑是该编辑是最受欢迎的书籍（我这是一个完全不同的问题，我怀疑我可以通过一些 mongodb 魔术聚合来解决。请参阅最后的相关问题链接）。

我想在每个编辑器下都有一个“更多编辑”按钮，以及一个“更多书籍”按钮。我有两个收藏，一个用于编辑，一个用于带有返回编辑的链接的书籍，我设置了两个订阅，每个订阅都有限制。基本上我的模板可以

<template name="onepage">
  {{#each editor in AllEditors}}
     {{editor.name}}
     {{> bookList editor }}
  {{/each}}
  <button>more editors</button>
</template>
<template name="bookList">
  {{#each book in AllBooks}}
    {{book.name}}
  {{/each}
  <button>more books</button>
</template>

问题是单击“更多编辑器”会重新呈现我的整个页面。

新编辑器已正确添加到列表末尾，但结果对用户不太友好。我可以看到问题。请求一个编辑器（使用订阅和限制）我强制重新计算 AllEditors 变量，这强制重新计算每个 BookList 模板。当我要求更多书时，新书被正确添加而不会闪烁，因为我要求 blaze 只添加一个元素，它足够聪明，可以避免重新渲染整个模板。

如何重新构建这两个模板以避免此问题？

更新：

这不是我使用的实际代码，但这是 onCreated 和 helpers 函数的主要思想

Template.onepage.onCreated () ->
  template = this
  template.limit = new ReactiveVar(10)

  template.autorun () ->
    limit = template.limit.get()
    template.subscribe("editors",limit)

Template.onepage.helpers
 'allEditors': () ->
    template = Template.instance()
    limit = template.limit.get()
    Editors.find({},{}, {limit:limit})

书籍模板也是如此

【问题讨论】：

您能否更详细地描述一下，您所说的“不友好”是什么意思？
它闪烁，整个页面被重新渲染。由于页面非常密集，这可能会使用户迷失方向。此外，如果我要求再增加一位编辑器，我不想等其他 90 位重新渲染后才看到新的。
嗯，这很有趣，因为我使用大量数据重新渲染整个页面而不会闪烁。介意，如果再添加一些这个模板对应的js代码？尤其是onCreated 和helpers?
@Jankapunkt：完成。这是我的代码的浓缩形式，用于解释核心问题而不会迷失其他细节。所以上面的代码未经测试，但与我目前正在处理的非常相似。
你愿意重组你的数据结构来解决这个问题吗？

标签： meteor meteor-blaze

【解决方案1】：

当我做这样的事情时，我不会分成不同的模板。我使用具有父/子关系的模板助手。

Template.page.helpers({
   groups() {
     return ...
   },
   items(parent) {
     if(parent) {
       return ...
     } else {
       return null;
     }
   }
});

html中的简单示例：

<div>
 {{#each groups}}
   {{this.groupname}}
   {{#each items this}}
     {{_id}}
   {{/each}}
 {{/each}}
</div>

只需确保组名与项目中的字段匹配，这样它们就可以组合在一起。从初始限制开始，然后通过单击事件展开该限制。这将导致编辑器列表在页面不刷新的情况下增长。我在很多领域都成功地使用了这种方法。

【讨论】：