Question

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

我希望有一个按钮用于＆＃34;更多编辑＆＃34;和一个用于＆＃34;更多书籍＆＃34;在每个编辑下。我有两个系列，一个用于编辑，另一个用于书籍，并且链接回编辑，我设置了两个订阅，每个订阅限制一个。基本上我的模板

<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>

问题在于点击＆＃34;更多编辑＆＃34;我的整个页面重新渲染。

新编辑器在列表末尾正确添加，但结果不是非常用户友好。我可以看到问题。再请求一个编辑器（使用订阅和限制）我强制重新计算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})

同样适用于书籍模板

相关问题：sort mongo collection based on the score of child documents

Answer 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>

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

Meteor嵌入式模板导致重新呈现

1 个答案: