重新渲染列表模板導致頁面滾動到頂部

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來回滾到應該出現的位置，但當頁面跳躍時，會留下一個令人討厭的閃爍。

我試過在整個列表以及每個項目div上使用preserve以防止它們被更新，但這似乎並沒有阻止滾動。我也嘗試過把{{#isolate}}塊放在任何東西周圍，沒有任何運氣。

有什麼我可以在這裏做，使頁面不滾動時，它重新呈現？組合模板的方式不同？我錯過了preserve或{{#isolate}}的某些方面？

Answer 1

頁面滾動到頂部，因爲您的 <a href="#">Load more...</a>將使頁面滾動到頂部。當你的href鏈接到「＃」時，頁面將滾動到具有＃「元素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。但它會使你的頁面正好載入你想要的地方。