Re-Rendering Listenvorlage verursacht Seite nach oben

Question

ich einige Vorlagen haben zu scrollen, die in etwa wie folgt aussehen:

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

mit zugehörigem javascript:

Template.items.items = function() { 
    return Items.find({}, {limit: Session.get("itemCount")}); 
} 

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

Alle, die zusammen mehr oder weniger gibt mir etwas, das so ziemlich wie ein unendlicher Scroll-Bereich funktioniert. (Der eigentliche Code hat ein paar mehr beweglichen Teile, aber das ist das wichtige Bit.)

Immer, wenn ich auf loadMore klicken, es aber beide mehr Daten nach unten zieht und blättert mich zurück zum Seitenanfang, eher den Zweck der unendlichen Scroll zu besiegen. Ich kann etwas Javascript einwerfen, um zurück zu scrollen, wo es sein sollte, aber das hinterlässt ein unangenehmes Flackern, wenn die Seite schnell herumhüpft.

Ich habe versucht, preserve auf der gesamten Liste sowie auf jedem Artikel div zu verwenden, damit sie nicht aktualisiert werden, aber das scheint nicht zu stoppen das Scrollen. Ich habe auch versucht {{#isolate}} Blöcke um fast alles und jeden ohne Glück zu setzen.

Gibt es etwas, was ich hier tun kann, damit die Seite nicht rollt, während sie neu gerendert wird? Vorlagen anders gestalten? Ein Aspekt von preserve oder {{#isolate}}, die ich verpasst habe?

Answer 1

Die Seite scrollt nach oben, weil Ihre <a href="#">Load more...</a> die Seite nach oben scrollen lässt. Wenn Ihr href auf "#" verweist, scrollt die Seite zum DOM-Element mit # "element id". Durch Klicken auf einen Link mit nur "#" wird nach oben geblättert.

Sie haben zwei Möglichkeiten:

1. Prevent das Standardverhalten auf dem Click-Ereignis (einfache Option):

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

   Dies wird die Seite neu geladen

2. Noch besser stoppen: make die <a href="#">Load more...</a> Verbindung zu "#{{_id}}" Dann scrollt die Seite automatisch zu dem Element mit der von Ihnen angegebenen ID. Dies erfordert eine Umstrukturierung der Vorlagen und möglicherweise eine Hilfsmethode in der Vorlage, um Ihnen die ID des letzten Elements zu geben. Aber es wird Ihre Seite genau dorthin laden, wo Sie wollen.