5

我有一些看起来大致像这样的模板：

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

4

1 回答 1

8

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

你有两个选择：

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

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

    这将停止页面重新加载

  2. 更好的是：创建<a href="#">Load more...</a>链接，"#{{_id}}"然后页面将自动滚动到具有您提供的 id 的元素。这将需要对模板进行一些重组，并且可能需要模板中的辅助方法来为您提供最后一项的 id。但这会使您的页面准确地加载到您想要的位置。
于 2012-11-19T15:33:14.967 回答