流星群のシンプルタイマーJS

Question

私はゲーム用の単純なカウントダウンタイマーを作成しています。私はCoffeeScriptとMeteorを使用しています。私は{{time}}式のハンドルバー "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

あなたはその反応性、そうでない場合はテンプレートシステムがUIでそれを更新する際に注意されないようSessionを使用する必要がハンドルバーの値を更新する場合。また、タイマー値の代わりにハンドルを持つハンドラーをテンプレートに渡しました。

私はこのデータをハンドルバーに渡すのにSessionを使用しました。場合はJavaScriptでも

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" 

誰がこれを望んでいる：本質的には

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の時間価値を伝えると、その更新されたときにそれが更新時刻値を再描画するテンプレートシステムに指示します。