小编use*_*246的帖子

我有一些看起来像这样的模板:

<template name="items">
  <div class="item-list">
    {{#each items}}
      {{> item}}
    {{/each}}
  <div>
  {{> loadMore}}
</template>

<template name="item">
  <div class="item" id="{{unique_string}}">
    <!-- stuff here -->
  </div>
</template>

<template name="loadMore">
  <a href="#">Load more...</a>
</template>

使用相关的javascript:

Template.items.items = function() {
  return Items.find({}, {limit: Session.get("itemCount")});
}

Template.loadMore.events({
  "click": function() {
    Session.set("itemCount", Session.get("itemCount") + 10);
  }
})

所有这些或多或少都给了我一些非常像无限滚动部分的东西.(实际代码还有一些移动部件,但这是重要的部分.)

loadMore然而,每当我点击它时,它都会拉下更多的数据并将我滚动到页面的顶部,而不是无视滚动的目的.我可以输入一些javascript来向下滚动到它应该的位置,但是当页面快速跳跃时会留下令人讨厌的闪烁.

我已尝试preserve在整个列表以及每个项目div上使用它们以防止它们更新,但这似乎并没有停止滚动.我也尝试过{{#isolate}}几乎所有的东西,没有任何运气.

我可以在这里做些什么来让页面在重新渲染时不会滚动吗？以不同方式编写模板？我错过了某些方面preserve或者{{#isolate}}我错过了什么？