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

我注意到当我使用这样的模板助手时，这会大大增加我的UI加载时间，这意味着查询数据库会影响用户加载UI的时间。在我的浏览器中，我很长时间没有看到任何内容，然后突然出现UI。

如何异步使用模板助手（或任何其他有助于我的方式），这样它们不会影响用户界面的加载时间？

谢谢，乍得

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>

您可以使用动画或任何您想要的内容替换“正在加载...”。

该示例的助手是

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，但同样适用于其他路由器。

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

1 个答案: