javascript - Meteor Helpers - DOM 操作

Question

// Works
var counter = 0;
    var myInterval = Meteor.setInterval(function(){
      counter++;
      var time = moment().hour(0).minute(0).second(counter).format('HH:mm:ss');
      console.log(time);
    }, 1000);

// Inside Helper - Does Not Work

Template.clockRunner.helpers({
  start: function () {
    var counter = 0;
    var time = moment().hour(0).minute(0).second(counter).format('HH:mm:ss');
    var myInterval = Meteor.setInterval(function(){
      counter++
    }, 1000);
    return time;
  },
})

第一个版本控制台以 1 秒为增量记录时间。 Helper 版本在 DOM 中显示“00:00:00”，但不会增加，如果我在 helper 中控制台记录时间，它每秒记录“00:00:00”。

我不确定我是否误解了助手的 react 性质，或者我是否没有看到一个小错误。提前致谢!

Answer 1

助手旨在向 Blaze 模板提供数据；除非从模板调用，否则不会调用它。

也就是说，您应该将助手视为仅提供数据的东西，它不应该“做任何事情”。当模板呈现时，当 react 数据被处理时，助手可能会以意想不到的方式被多次调用。

我认为您希望在 onRendered() 方法中启动计时器；当模板被放置在屏幕上时被调用一次。 (当模板离开屏幕时会调用相应的方法，因此可以停止计时器)。

一旦定时器启动，您可以将定时器数据写入 react 变量，然后返回该定时器数据的格式化版本的帮助程序。因为它位于响应式(Reactive)变量中，这将确保每次计时器计时时都会重新调用您的助手。

最后一部分只是确保 Blaze 模板引用助手。