如何异步使用流星的模板助手？

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

我注意到，当我使用这种模板佣工这增加大大缩短了我的UI加载时间，这意味着查询数据库会影响加载UI的时间。在我的浏览器中，我很久没看到任何东西，然后突然出现UI。

如何异步使用模板帮助程序（或任何其他方式可以帮助我），这样它们不会影响UI的加载时间？

感谢，乍得

来源

2016-09-21 Chad Davis

首先确保你跟随权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，但其他路由器也一样。

来源

2016-09-21 12:28:12 Kostas

如何异步使用流星的模板助手？

回答

相关问题