重新呈现列表模板会导致页面滚动到顶部 [英] Re-rendering list template causes page to scroll to top
问题描述
我有一些大致如下所示的模板:
<div class="item-list">{{#每件物品}}{{>物品}}{{/每个}}<div>{{>装载更多}}<模板名称=项目"><div class="item" id="{{unique_string}}"><!-- 这里的东西--><模板名称=loadMore"><a href="#">加载更多...</a>
与相关的javascript:
Template.items.items = function() {返回 Items.find({}, {limit: Session.get("itemCount")});}Template.loadMore.events({点击":函数(){Session.set("itemCount", Session.get("itemCount") + 10);}})所有这些或多或少给了我一些几乎像无限滚动部分一样的东西.(实际代码还有一些活动部分，但这是重要的一点.)
每当我点击 loadMore 时，它都会向下拉更多数据并且将我滚动回页面顶部，而不是无限滚动的目的.我可以输入一些 javascript 来向下滚动到它应该在的位置，但是当页面快速跳转时会留下令人讨厌的闪烁.
我尝试在整个列表以及每个项目 div 上使用 preserve 来防止它们更新，但这似乎并没有阻止滚动.我也试过将 {{#isolate}} 块放在几乎任何东西周围，但没有任何运气.
我可以在这里做些什么来使页面在重新呈现时不滚动?以不同的方式组合模板?我错过了 preserve 或 {{#isolate}} 的某些方面?
页面滚动到顶部，因为您的<a href="#">加载更多...</a> 将使页面滚动到顶部.当您的 href 链接到 "#" 时，页面将滚动到带有 #"element id" 的 DOM 元素.单击仅包含#"的链接将滚动到顶部.
您有两个选择:
防止点击事件的默认行为(简单选项):
Template.loadMore.events({点击":功能(事件){event.preventDefault();Session.set("itemCount", Session.get("itemCount") + 10);} })这将停止页面重新加载
- 更好:将 <code> 链接到
"#{{_id}}"然后页面将自动滚动到具有您提供的 id 的元素.这将需要对模板进行一些重组，并且可能需要模板中的辅助方法来为您提供最后一项的 id.但它会让您的页面准确加载到您想要的位置.
I have some templates that look roughly like this:
<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>
With associated javascript:
Template.items.items = function() {
return Items.find({}, {limit: Session.get("itemCount")});
}
Template.loadMore.events({
"click": function() {
Session.set("itemCount", Session.get("itemCount") + 10);
}
})
All that together more-or-less gives me something that pretty much works like an infinite scrolling section. (The actual code has a few more moving parts, but this is the important bit.)
Whenever I click on loadMore, though, it both pulls more data down and scrolls me back to the top of the page, rather defeating the purpose of infinite scroll. I can throw in some javascript to scroll back down to where it should be, but that leaves a nasty flicker as the page hops around quicly.
I've tried using preserve on the entire list as well as on each item div to keep them from getting updated, but that didn't seem to stop the scrolling. I've also tried putting {{#isolate}} blocks around just about any and everything, without any luck.
Is there something I can do here to make the page not scroll around while it re-renders? Composing templates differently? Some aspect of preserve or {{#isolate}} that I've missed?
The page scrolls to top because your
<a href="#">Load more...</a> will make the page scroll to top. When your href links to "#" the page will scroll to the DOM element with #"element id". Clicking a link with only "#" will scroll to top.
You have two options:
Prevent the default behaviour on the click event (easy option):
Template.loadMore.events({ "click": function(event) { event.preventDefault(); Session.set("itemCount", Session.get("itemCount") + 10); } })This will stop the page reload
- Even better: make the
<a href="#">Load more...</a>link to"#{{_id}}"then the page will automatically scroll to the element with the id you provided. This will require some restructuring of the templates and maybe a helper method in the template to give you the id of the last item. But it will make your page load exactly where you want.
这篇关于重新呈现列表模板会导致页面滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
