Re rendering modello fa sì che la pagina per scorrere verso l'alto

Question

Ho alcuni modelli che sembrano più o meno in questo modo:

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

con JavaScript associati:

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

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

Tutto questo insieme più o meno mi dà qualcosa che funziona praticamente come una sezione a scorrimento infinita. (Il codice vero e proprio ha un paio di parti in movimento, ma questo è il bit importante.)

Ogni volta che clicco su loadMore, però, sia tira più dati verso il basso e scorre mi riporta alla parte superiore della pagina, piuttosto sconfiggendo lo scopo del rotolo infinito. Posso inserire un po 'di javascript per scorrere di nuovo verso il basso dove dovrebbe essere, ma questo lascia uno sfarfallio mentre la pagina salta velocemente.

Ho provato a utilizzare preserve sull'intero elenco e su ogni elemento div per impedire che vengano aggiornati, ma ciò non sembra aver interrotto lo scorrimento. Ho anche provato a mettere blocchi {{#isolate}} intorno a qualsiasi cosa, senza alcuna fortuna.

C'è qualcosa che posso fare qui per fare in modo che la pagina non scorra mentre ritorna? Comporre i modelli in modo diverso? Alcuni aspetti di preserve o {{#isolate}} che ho perso?

Answer 1

La pagina scorre verso l'alto perché il tuo <a href="#">Load more...</a> farà scorrere la pagina verso l'alto. Quando il tuo href si collega a "#", la pagina scorrerà fino all'elemento DOM con # "id elemento". Cliccando su un link con solo "#" scorrerà verso l'alto.

si hanno due opzioni:

1. evitare che il comportamento di default sull'evento click (facile opzionale):

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

   Questo fermerà il ricaricare la pagina

2. Ancora meglio: fare il collegamento <a href="#">Load more...</a> a "#{{_id}}" quindi la pagina scorrerà automaticamente all'elemento con l'ID che hai fornito. Ciò richiederà una ristrutturazione dei modelli e forse un metodo di supporto nel modello per darti l'id dell'ultimo elemento. Ma renderà la tua pagina caricare esattamente dove vuoi.