Как работать с помощниками шаблона Meteor асинхронно?

Question

у меня в HTML файл следующего кода:

<div class="col-sm-6"> 
    <div class="hpanel"> 
    <div class="panel-heading">Total Views</div> 
    <div class="panel-body"> 
     <div class="stat-num">{{Views}}</div> 
    </div> 
    </div> 
</div> 

есть в моей JavaScript файл следующего кода, который запрос MongoDB:

var Views = function() { 
    var usersViews = Tracks.find().fetch().map(function(x) { 
    return x.count; 
    }); 
    var sum = 0; 
    for(var i=0; i<usersViews.length; i++) 
    sum += parseInt(usersViews[i]); 
    return sum; 
} 

Template.Campaign.helpers{{ 
    "Views": function() { 
    return Views(); 
    } 
} 

Я заметил, что когда я использую такие помощник шаблона это увеличивает значительно время до загрузки моего пользовательского интерфейса, а это означает, что запрос базы данных влияет на время загрузки пользовательского интерфейса. В моем браузере я ничего не вижу в течение длительного времени, а затем внезапно появляется пользовательский интерфейс.

Как я могу использовать ассемблер шаблонов (или любой другой способ, который поможет мне), чтобы они не повлияли на время загрузки пользовательского интерфейса?

Спасибо, Чад

Answer 1

Прежде всего убедитесь, что вы следуете правильные скороговорки и вы делаете подписку шаблон уровня, а не маршрутизатор-уровня. После того, как у вас есть подписанные данные на клиенте, вы сможете получить его очень быстро. Также подпишитесь только на нужные вам данные и не получите всю коллекцию.

Что вы хотите, это показать пользователю сообщение о том, что страница загружается, пока подписка не готова, а затем покажет данные после ее получения. Так что-то вроде:

<template name="blogPost"> 
<a href="/">Back</a> 
{{#if Template.subscriptionsReady}} 
    {{#with post}} 
    <h3>{{title}}</h3> 
    <p>{{content}}</p> 
    {{/with}} 
{{else}} 
    <p>Loading...</p> 
{{/if}} 
</template> 

Вы можете заменить 'Loading ...' анимацией или чем угодно.

Помощник для этого примера

Template.blogPost.helpers({ 
    post: function() { 
    var postId = FlowRouter.getParam('postId'); 
    var post = Posts.findOne({_id: postId}) || {}; 
    return post; 
    } 
}); 

и ваш шаблон уровня подписки:

Template.blogPost.onCreated(function() { 
    var self = this; 
    self.autorun(function() { 
    var postId = FlowRouter.getParam('postId'); 
    self.subscribe('singlePost', postId); 
    }); 
}); 

Этот пример из документации here. В этом примере я использовал FlowRouter, но то же самое относится и к другим маршрутизаторам.