如何使与时间相关的模板无效

时间:2014-09-12 17:14:40

标签: javascript meteor

我有一个取决于当前时间的模板助手:

Template.bunny.alive = function () { 
  if (this.time_to_die < new Date().getTime())
    return true;
  else
    return false;
};

当当前时间超过time_to_die时,如何让meteor重新绘制模板?

<template name="bunny"> 
{{if alive }}
  Your bunny is alive.
{{/if}}
</template>

编辑&gt;

可能的解决方案是使用Session变量并以10秒的间隔存储更新的时间。 所以

Session.setDefault("current_time", new Date().getTime());

Meteor.setInterval(function() { 
  Session.set("current_time", new Date().getTime());
}, 10000);

然后我可以在我的助手中使用Session.get(&#34; current_time&#34;)来使它们很好地反应......

虽然感觉有点像kludgey?

2 个答案:

答案 0 :(得分:2)

使用反应变量来指示生命状态,并使用计时器(仅)在它死亡时进行更改。

Template.world.created = function(){
   self = this
   self.isAlive = new ReactiveVar(true)
   setTimeout(function(){
      self.isAlive.set(false)
   }, self.time_to_die-Date.now())
}

Template.bunny.alive = function () { 
   return Template.instance().isAlive.get()
}

答案 1 :(得分:1)

我认为如果您希望模板能够被动地更新,我必须使用计时器,但Session变量可以使用ReactiveVar来避免,但是当您想要访问时它会变得有点棘手子模板中的模板实例范围变量。

client/views/world/world.js

Template.world.created=function(){
  // we will store the current time using a template instance scoped ReactiveVar
  this.now=new ReactiveVar(Date.now());
  // use a timer to update the current time every second
  this.timer=Meteor.setInterval(_.bind(function(){
    this.now.set(Date.now());
  },this),1000);
};

Template.world.destroyed=function(){
  // clean up on destroy
  Meteor.clearInterval(this.timer);
};

Template.world.helpers({
  inFiveSecondsFromNow:function(){
    return Date.now()+5000;
  }
});

client/views/wordl/world.html

<template name="world">
  {{> bunny timeToDie=inFiveSecondsFromNow}}
</template>

client/views/bunny/bunny.js

Template.bunny.helpers({
  alive:function(){
    // the "tricky" part (and it doesn't get better with nesting)
    var world=Template.instance().view.parentView.parentView._templateInstance;
    return this.timeToDie>=world.now.get();
  }
});

client/views/bunny/bunny.html

<template name="bunny">
  {{#if alive}}
    Your bunny is alive.
  {{else}}
    Your bunny is dead !
  {{/if}}
</template>

渲染时,世界模板示例将显示“你的兔子还活着”。 5秒钟,然后“你的兔子死了!”。

如果你的应用很简单,我认为Session变量+全局定时器可能没问题,这个例子的好处是我们将反应变量和定时器都放在模板实例中,所以如果是一个庞大的复杂单页面应用程序,Session没有被污染,计时器只在我们渲染世界模板时执行。