Eu tenho alguns modelos que parecem mais ou menos assim:

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

Com javascript associado:

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

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

Tudo isso junto mais ou menos me dá algo que funciona como uma seção de rolagem infinita. (O código atual tem mais algumas partes móveis, mas esse é o bit importante.)

Sempre que clico emloadMore, no entanto, puxa mais dados para baixoe Rola-me de volta para o topo da página, em vez de derrotar o propósito do pergaminho infinito. Eu posso jogar em algum javascript para rolar para baixo até onde deveria estar, mas isso deixa um flicker desagradável como a página pula em torno de forma chique.

Eu tentei usarpreserve em toda a lista, bem como em cada itemdiv para mantê-los atualizados, mas isso não pareceu parar a rolagem. Eu também tentei colocar{{#isolate}} bloqueia praticamente qualquer coisa, sem sorte.

Há algo que eu possa fazer aqui para fazer a página não rolar enquanto re-renderiza? Compor modelos de maneira diferente? Algum aspecto depreserve ou{{#isolate}} que eu perdi?