dimanche 22 mars 2015

Multiple countDown timers on a single page in a meteor app


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




Aucun commentaire:

Enregistrer un commentaire