Question

我正在为游戏创建一个简单的倒数计时器。我正在使用CoffeeScript和Meteor。我有一个带有{{time}}表达式的Handlebars“Timer”模板。

以下是代码：

clock = 10

timeLeft = () ->
    if clock > 0
        clock--
    else
        "That's All Folks"
        Meteor.clearInterval(interval)

interval = Meteor.setInterval(timeLeft, 1000)

if Meteor.isClient
    Template.timer.time = interval

上面的代码只给我一个8或6的静态显示，而不是倒数计时器。

如果我添加一些console.log语句，我可以看到它在终端中的设计工作。

clock = 10

timeLeft = () ->
    if clock > 0
        clock--
        console.log clock
    else
        console.log "That's All Folks"
        Meteor.clearInterval(interval)

interval = Meteor.setInterval(timeLeft, 1000)

if Meteor.isClient
    Template.timer.time = interval

Answer 1

如果要更新手柄中的值，则需要使用Session以使其处于反应状态，否则模板系统将无法知道何时在ui中更新它。您还为模板传递了句柄而不是计时器值。

使用下面的内容，我使用Session将这些数据传递给了把手。

clock = 10
timeLeft = ->
  if clock > 0
    clock--
    Session.set "time", clock
    console.log clock
  else
    console.log "That's All Folks"
    Meteor.clearInterval interval

interval = Meteor.setInterval(timeLeft, 1000)
if Meteor.isClient
  Template.timer.time = ->
    Session.get "time"

另外在javascript中，如果其他人想要这个：

var clock = 10;

var timeLeft = function() {
  if (clock > 0) {
    clock--;
    Session.set("time", clock);
    return console.log(clock);
  } else {
    console.log("That's All Folks");
    return Meteor.clearInterval(interval);
  }
};

var interval = Meteor.setInterval(timeLeft, 1000);

if (Meteor.isClient) {
  Template.registerHelper("time", function() {
    return Session.get("time");
  });
}

实质上，您告诉Session时间值，当它更新时，它会告诉模板系统使用更新的时间值重绘。

Meteor JS中的简单计时器

1 个答案: