8

ゲーム用の単純なカウントダウン タイマーを作成しています。私は CoffeeScript と Meteor を使用しています。{{time}} 式を持つハンドルバー「タイマー」テンプレートがあります。

コードは次のとおりです。

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
4

1 に答える 1

12

ハンドルバーの値を更新したい場合はSession、反応するように使用する必要があります。そうしないと、Templating システムは 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、時間値を伝え、それが更新されると、テンプレート システムに更新された時間値で再描画するように指示します。

于 2013-03-05T16:39:47.863 に答える