Simple Timer in Meteor JS

Question

Sto creando un semplice conto alla rovescia per un gioco. Sto usando CoffeeScript e Meteor. Ho un modello "Timer" di Handlebars con un'espressione {{time}}.

Ecco il codice:

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 

Il codice di cui sopra mi dà una mostra statica di 8 o 6 invece del conto alla rovescia.

Se aggiungo alcune istruzioni di console.log, posso vederlo funzionare come progettato nel terminale.

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

Se si desidera aggiornare un valore in manubri è necessario utilizzare Session modo che la sua reattivo, altrimenti il ​​sistema di template non sarà a conoscenza di quando per aggiornarlo nell'interfaccia utente. Inoltre, hai passato al modello un gestore che rappresenta l'handle anziché il valore del timer.

Utilizzando il seguente, ho utilizzato Session per passare questi dati attraverso i manubri.

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" 

anche in javascript nel caso qualcuno altro vuole questo:

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"); 
    }); 
} 

In sostanza vi dico Session il valore del tempo, e quando il suo aggiornato racconta il sistema di template di ridisegnare con il valore del tempo aggiornato.