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

Question

我很难在 meteor 应用程序中显示多个倒数计时器。

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

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

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

但老实说，这不是解决此问题的最佳方法。相反，我会建议创建一个简单的模板助手，它在拍卖项目的末尾 date/time 中输入并输出适当的字符串来描述剩余的时间量。这可以通过 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 2

您可以将每个倒数计时器与您的 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 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()
)

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

Multiple countDown timers on a single page in a meteor app

javascript

meteor

timer

countdown