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

流星应用程序中单个页面上的多个countDown计时器

3 个答案: