流星应用程序在单个页面上有多个倒数计时器

Question

我正在努力在流星应用中显示多个倒数计时器。

AuctionExpireIn是一个日期，格式为-2015-03-23T17：17：52.412Z。

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

尽管每个拍卖品的目标日期都不同，但我看到的是所有三行都有相同的倒数计时器。 显然，该会话未绑定到每个记录，并且对于所有三行都显示相同的会话值。

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

感谢所有帮助。

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

您可以将每个倒数计时器绑定到AuctionItem模板的实例。 以下内容用作概念证明； 每个模板都会从1到10选取一个随机数，然后递减到0。要将其应用于您的案例，只需将this.AuctionExpireIn和new Date（）（我没有看过）之间的moment.js差异替换为随机数即可。起来，因为我不知道这是临时的）。

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

我从上述工作中注意到的一点是，您不想尝试从助手那里设置计数器。 只是从助手那里得到计数器。

Answer 2

我不确定以上内容是否是应用程序当前的全部逻辑，但是根据您提供的内容，问题似乎是您使用单个Session变量来跟踪三个不同竞价的剩余时间项目。 如果您需要使用Session来跟踪三个不同拍卖品的剩余时间，则应使用三个单独的Session变量来进行操作，例如：

Session.set('auctionItemOne');
Session.set('auctionItemTwo');
Session.set('auctionItemThree');

但老实说，这不是解决此问题的最佳方法。 相反，我建议创建一个简单的模板助手，该助手使用拍卖项目的结束日期/时间并输出适当的字符串来描述剩余时间。 这可以通过Moment.js之类的库轻松完成。 为了实施此解决方案，请执行以下操作：

// Template
<template name="auctionItem">
    {{timeRemaining}}
</template>

// Template Helper
Template.auctionItem.helpers({
    timeRemaining: function() {
        // Call appropriate Moment.js methods

        // Return the string returned by Moment.js
    }
});

我希望这有助于您为如何处理自己的情况指明一个更好的方向。 如果您需要任何进一步的解释或帮助，请告诉我。

Answer 3

您可以使用ReactiveVar或Session在空格键帮助器中执行此操作。 本示例每秒输出当前时间。

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()
)