Se você está brincando com o Meteor, deve ter notado que as coleções que você assina podem demorar muito para carregar. Durante esse tempo, seria bom informar aos usuários que algo está realmente carregando.
Existem várias maneiras de fazer isso, mas aqui está a maneira mais fácil e eficaz que encontrei. Observar.
Primeiro, configuramos uma variável de sessão que designa my_collectioncomo carregamento. Isso funciona bem quando o Meteor é iniciado.
Meteor.startup(function() {
Session.setDefault('my_collection_loading', true);
});Agora vamos assinar my_collection. Mas espere! Configuramos um retorno de chamada que é executado quando a assinatura obtém os dados. O retorno de chamada altera a variável de sessão para false, para indicar que terminamos de carregar os dados.
Deps.autorun(function() {
Meteor.subscribe('my_collection', function() {
// This will run when we're subscribed
Session.set('my_collection_loading', false);
});
});Enquanto os dados são carregados, vamos configurar um assistente de template para nosso template. Ele simplesmente retornará a variável de sessão. Quando os dados estão carregando, ele retorna verdadeiro. Quando terminar, ele retorna falso. Coisas simples.
Template.foobar.helpers({
my_collection_loading: function() {
return Session.get('my_collection_loading');
}
});Finalmente, o modelo. Aqui, estamos configurando uma lista que simplesmente percorre os itens e exibe o nome do item. Esses são os dados. Abaixo disso, você notará um ifassistente de bloco do guiador , que exibirá “Carregando” em um texto de título grande. Quando os dados terminarem de carregar, o assistente de modelo mudará para falso e o aviso de carregamento desaparecerá.
<template name="foobar">
<ul>
{{#each item}}
<li>{{item.name}}</li>
{{/each}}
</ul>
{{#if my_collection_loading}}
<h2>Loading...</h2>
{{/if}}
</template>E é isso! Encorajo-vos a experimentá-lo. Isso torna a experiência do usuário muito mais agradável.