重新呈现列表模板会导致页面滚动到顶部

Question

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

<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}}我错过了什么？

Answer 1

页面滚动到顶部,因为您 <a href="#">Load more...</a>将使页面滚动到顶部.当你的href链接到"#"时,页面将滚动到带有#"element id"的DOM元素.单击仅包含"#"的链接将滚动到顶部.

您有两种选择:

1. 防止click事件的默认行为(简单选项):

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

   这将停止页面重新加载

2. 更好的是:建立<a href="#">Load more...</a>链接"#{{_id}}"然后页面将自动滚动到您提供的ID元素.这将需要对模板进行一些重组,并且可能需要在模板中使用辅助方法来为您提供最后一项的ID.但它会使您的页面正好加载到您想要的位置.