Como evitar que o conteúdo se desloque quando o Meteor atualiza a coleção
Minha pergunta é muito parecida comeste eaquele mas não exatamente o mesmo.
Eu tenho o seguinte modelo no meu aplicativo Meteor:
<template name="items">
<div class="mainframe">
<h3>Available items:</h3>
<div class="items-table-container">
<table class="table table-hover">
<tbody>
{{#each all_items}}
{{> item}}
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="btn-group">
<button id="create" class="btn">Create new item</button>
</div>
</template>
A função template é trivial:
Template.items.all_items = function () {
return Items.find({}, {sort: {name: 1}}).fetch();
}
Há também um evento ligado ao#create
botão que insere um novo item na coleção Items e funciona bem.
Agora a parte mais importante é o CSS:
.items-table-container {
height:340px;
overflow-y: scroll;
}
Então, basicamente, eu quero que minha tabela tenha conteúdo rolável dentro de uma área de tamanho fixo. O problema começa quando rodo o conteúdo da tabela de itens em um navegador e, em outro navegador, adiciono um novo item. O primeiro navegador atualiza a lista de itens e rola o conteúdo de volta para a posição superior.
A questão é: como posso evitar a atualização automática de um único modelo? Eu acho que neste caso em particular, eu realmente preciso de algo como a atualização tradicional da página da Web: OK, se um usuário não ver um item recém-adicionado imediatamente, mas sim depois que ele recarregar a página.
Outra ideia é fazer algum tipo de paginação em vez do conteúdo rolável. Acho que isso resolveria o problema, mas isso seria muito mais complicado e eu gostaria de evitar isso.
Eu acho que, idealmente, eu gostaria de poder dizer ao Meteor que eu quero que o Meteor atualize o template não quando o modelo muda, mas sim por um pedido.