javascript - meteor 应用程序中单个页面上的多个倒计时器

Question

我正在努力在 meteor 应用程序中显示多个倒计时器。

AuctionExpireIn 是格式为 - 2015-03-23T17:17:52.412Z 的日期。

有一个auctionItems集合，在auctionItem模板中显示3行拍卖元素。

虽然每个拍卖品的目标日期都不同，但我看到的是所有三行都有相同的倒计时器。显然， session 并未与每条记录绑定(bind)，并且所有三行都显示相同的 session 值。

如何根据每个拍卖元素文档的目标数据获取不同的行来显示倒计时器？

感谢所有帮助。

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

您可以将每个倒计时器绑定(bind)到拍卖项目模板的一个实例。以下内容作为概念验证；每个模板都会选择一个从 1 到 10 的随机数，并倒数到 0。要将其应用到您的案例中，只需将随机数替换为 moment.js this.AuctionExpireIn 和 new Date() 之间的差异(我没有看)因为我一时不知道)。

Template.auctionItem.created = function(){
  var self = this;
  var num = Math.floor(Math.random() * 10);
  this.remaining = new ReactiveVar(num);
  this.interval = Meteor.setInterval(function(){
    var remaining = self.remaining.get();
    self.remaining.set(--remaining);
    if (remaining === 0){
      Meteor.clearInterval(self.interval);
    }
  }, 1000);
}

Template.auctionItem.helpers({
  remaining: function(){
    return Template.instance().remaining.get();
  }
});

我从上面的努力中注意到的一点是你不想尝试从助手设置计数器；只需从助手那里获取计数器即可。