Meteorのテンプレートヘルパーを非同期に扱うには？

Question

私はHTMLで次のコードをファイルしている：私はJavaScriptでのMongoDBを照会次のコードファイルをしている

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

を：

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(); 
    } 
} 

を私は、このようなテンプレートヘルパーを使用する場合、これが増大していることに気づきましたUIが読み込まれるまでの時間が大幅に短縮されます。つまり、データベースのクエリは、UIの読み込みにかかる時間に影響します。 私のブラウザでは、何も表示されず、突然UIが表示されます。

テンプレートヘルパーを非同期的に使用して、UIの読み込み時間に影響しないようにするにはどうすればよいですか？

おかげで、すべての チャド

Answer 1

まずあなたが右のpattersを以下していて、テンプレート・レベルのサブスクリプションではなくルータレベルをやっていることを確認してください。クライアントに登録されたデータを取得すると、それを非常に高速に取得できます。また、必要なデータだけを購読し、コレクション全体を取得しないでください。

あなたが望むのは、サブスクリプションが準備されていない間にページが読み込まれていることをユーザーに示してから、そのデータを表示することです。したがって、次のようなものがあります。

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

「読み込み中...」は、アニメーションなどで置き換えることができます。

その例えばヘルパーが

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を使用しましたが、他のルータにも同じことが適用されます。