Simple Timer in Meteor JS

Question

I am creating a simple countdown timer for a game. I am using CoffeeScript and Meteor. I have a Handlebars "Timer" template with a {{time}} expression.

Here is the code:

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

The above code just gives me a static display of 8 or 6 instead of the countdown timer.

If I add a few console.log statements I can see it work as designed in the terminal.

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

If you want to update a value in handlebars you need to use Session so that its reactive, otherwise the Templating system won't be aware of when to update it in the ui. Also you passed the template a handler thats the handle instead of the timer value.

Using the below, I've used Session to pass this data through to handlebars.

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"

Also in javascript in case anyone else wants this:

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 essence you tell Session the time value, and when its updated it tells the templating system to redraw with the updated time value.