Multiple countDown timers on a single page in a meteor app

Question

I am struggling to get multiple countdown timers displayed in a meteor app.

AuctionExpireIn is a date in the format - 2015-03-23T17:17:52.412Z.

Have a auctionItems collection , displaying 3 rows of auction items in auctionItem template.

While the target date is different for each of the auction items, what I am seeing is all the three rows have the same countdown timer . Apparently the session is not tied to each of the records and the same session value is being displayed for all the three rows.

How do I get different rows to display countdown timer based on the target data that each auction item document has?

Appreciate all the help.

Template.auctionItem.helpers({

AuctionExpireIn : function() {

                var target_date = new Date(this.AuctionExpireIn).getTime();
                //alert (target_date);
                // variables for time units
                var days, hours, minutes, seconds;



                // update the tag with id "countdown" every 1 second
                setInterval(function( ) {

                        // find the amount of "seconds" between now and target
                        var current_date = new Date().getTime();
                        var seconds_left = (target_date - current_date) / 1000;
                        var countdown ='';
                        // do some time calculations
                        days = parseInt(seconds_left / 86400);
                        seconds_left = seconds_left % 86400;

                        hours = parseInt(seconds_left / 3600);
                        seconds_left = seconds_left % 3600;

                        minutes = parseInt(seconds_left / 60);
                        seconds = parseInt(seconds_left % 60);

                        // format countdown string + set tag value
                        countdown= days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
                        Session.set ('countdown', countdown);
                }, 1000);

                return Session.get('countdown');
        }
});

Answer 1

You can do this in a spacebars helper using ReactiveVar or Session. This example outputs the current time every second.

Template.registerHelper('Timer', (options)->
  now = new Date()
  reactive = new ReactiveVar(now.getTime())

  Meteor.setInterval(()->
    now = new Date()
    reactive.set now.getTime()
  ,1000)

  return reactive.get()
)