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元素。单击仅包含“＃”的链接将滚动到顶部。

您有两种选择：

防止点击事件的默认行为（简单选项）：

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

这将停止页面重新加载

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

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

1 个答案: