Javascript 如何延迟流星中变量的显示？_Javascript_Html_Meteor_Meteor Collections

Javascript 如何延迟流星中变量的显示？

javascript html meteor

Javascript 如何延迟流星中变量的显示？,javascript,html,meteor,meteor-collections,Javascript,Html,Meteor,Meteor Collections,我正在编写一个应用程序，它显示了基于收集计数的估计等待时间。我遇到的问题是，当加载或刷新页面时，waitTime会显示，但它首先显示0，大约一秒钟后，它会根据计数显示实际的waitTime。我假设这与变量在从集合获取计数时被延迟有关，因此它显示初始计数0，然后获取实际计数并显示waitTime 有没有办法让它只显示加载或刷新时的确切等待时间 js: Template.home.helpers({ waitTime:function（）{ var totalCount=Students.find（

我正在编写一个应用程序，它显示了基于收集计数的估计等待时间。我遇到的问题是，当加载或刷新页面时，waitTime会显示，但它首先显示0，大约一秒钟后，它会根据计数显示实际的waitTime。我假设这与变量在从集合获取计数时被延迟有关，因此它显示初始计数0，然后获取实际计数并显示waitTime

有没有办法让它只显示加载或刷新时的确切等待时间

js:

Template.home.helpers({
waitTime:function（）{
var totalCount=Students.find（）.count（）；
var小时=总计数/4；
如果（总计数<4）{
返回15*totalCount+“分钟”
}否则如果（totalCount>=4&&totalCount%4==0）{
返回小时数+小时数；
}否则如果（totalCount>=4&&totalCount%4==1）{
小时=小时-.25；
返回小时数+“小时数”+“15分钟”；
}否则如果（totalCount>=4&&totalCount%4==2）{
小时=小时-.5；
返回小时数+“小时数”+“30分钟”；
}否则如果（totalCount>=4&&totalCount%4==3）{
小时=小时-.75；
返回小时数+“小时数”+“45分钟”；
}
}
});

Html:


大约等待时间：{waitTime}
{{>quickForm id=“studentForm”collection=“Students”type=“insert”template=“bootstrap3 horizontal”label class=“col-sm-3”input col class=“col-sm-9”}

当第一次加载页面时，meteor的反应性尚未建立，因此计数始终为0，使显示屏显示为0。您需要检查订阅是否已完成，然后显示页面

Template.home.created = function() {
  this.loading = new ReactiveVar(true) 
  let subHandler = Meteor.subscribe('your-publication-name')
  this.loading.set(!subHandler.ready())
}

然后在模板帮助器中，检查加载是否为真，返回加载文本或其他内容，否则返回结果

像这样的

waitTime: function() {
  if (Template.instance().loading.get()) return "Loading";

  // the rest of the code
}

最直接的方法是在数据准备好之前不渲染视图（或至少渲染视图的相关部分）。两种主要方法是等待订阅准备就绪，或者等待获得所需的数据值

后者将是困难的，因为从我可以看出，0是一个可能的值。所以我建议采用前者

假设您的订阅与模板绑定，您可以按如下方式等待订阅就绪：

<template name= "home">
<body>
    {{#if Template.subscriptionsReady}}
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2>
    <div class="col-lg-6 col-lg-offset-3">
        <!-- Quick form from autoform package creates sign in form and populates collection with data-->
        {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
    </div>
    {{else}}
      Loading...
    {{/if}}
</body>
</template>


{{{#if Template.subscriptionsReady}
大约等待时间：{waitTime}
{{>quickForm id=“studentForm”collection=“Students”type=“insert”template=“bootstrap3 horizontal”label class=“col-sm-3”input col class=“col-sm-9”}
{{else}
加载。。。
{{/if}

Template.home.created = function() {
  this.loading = new ReactiveVar(true) 
  let subHandler = Meteor.subscribe('your-publication-name')
  this.loading.set(!subHandler.ready())
}

waitTime: function() {
  if (Template.instance().loading.get()) return "Loading";

  // the rest of the code
}

<template name= "home">
<body>
    {{#if Template.subscriptionsReady}}
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2>
    <div class="col-lg-6 col-lg-offset-3">
        <!-- Quick form from autoform package creates sign in form and populates collection with data-->
        {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}}
    </div>
    {{else}}
      Loading...
    {{/if}}
</body>
</template>