Question

我尝试使用我的meteor应用程序来使用此http://hilios.github.io/jQuery.countdown/。

我想要用户提交表单的功能，然后倒计时从他发送的第二个开始，我还需要向用户显示倒计时。

我不确定我是如何才能实现这个我正在寻找的东西。我目前在模板事件中这样做：

Template.insertProduct.events({
'submit form': function(event){
    event.preventDefault();
    Products.insert({
        name: "randomstring",
        startOfCountdown: new countdown("2016/01/01")
        })
}
});

这会在我的“产品”集合中插入一行：

meteor:PRIMARY> db.products.find()
{ "_id" : "k6eTrs43W3qcJaycn", "name" : "randomstring", "startOfCountdown" : { "
start" : ISODate("2015-04-09T09:53:25.330Z"), "end" : ISODate("2015-04-09T09:53:
25.330Z"), "units" : 222, "value" : 0, "years" : 0, "months" : 0, "days" : 0, "h
ours" : 0, "minutes" : 0, "seconds" : 0 } }

但实际上它对我帮助不大。

如果想要测试它，我可以像这样开始倒计时，它的工作正常。

Template.productList.onRendered( function () {
    $('#clock').countdown("2015/04/08", function(event) {
    var totalHours = event.offset.totalDays * 24 + event.offset.hours;
    $(this).html(event.strftime(totalHours + ' hr %M min %S sec'));
    })  
});

所以我的问题是 - 如何将这个jQuery插件添加到我的集合中并动态显示我插入到我的集合中的每个产品？我是否需要为我的集合中的每个条目添加div id，以便插件可以正常工作？

如果有人讨厌和思考的话，非常感谢。

Answer 1

看起来你正在混淆插件的概念，其工作是采用日期/时间并呈现将显示该日期/时间倒计时的HTML / JavaScript，以及该作品仅用于存储的集合持久数据。您要做的是在收集中存储与倒计时相关的任何信息，然后将该信息传递给倒计时插件，以便它可以显示倒计时。

所以，在你的收藏中，你真的只需要存储一个数据;也就是说，你倒计时的时间：

Template.insertProduct.events({
  'submit form': function(event){
    event.preventDefault();
    Products.insert({
        name: "randomstring",
        endOfCountdown: new Date("2016/01/01")
    });
  }
});

从您的模板名称，我假设您有一个名为productList的模板，负责显示有关多个产品的信息;我猜它看起来像这样...

<template name='productList'>
  {{#each products}}
    {{> product}}
  {{/each}}
</template>

然后，您有一个类似于......的产品模板

<template name='product'>
  <div class='product'>
    ... <!-- product-related stuff here -->
    <div class='clock'></clock>
  </div>
</template>

在这个模板的onRendered中，你想要添加倒数计时器：

Template.product.onRendered(function() { 
  Template.instance().$('.clock').countdown(this.data.endOfCountdown, function(event) { // Using Template.instance().$ only searches for instances of .clock in this template instance, not globally
    var totalHours = event.offset.totalDays * 24 + event.offset.hours;
    $(this).html(event.strftime(totalHours + ' hr %M min %S sec'));
  });
});

这将动态显示每个产品的倒计时。

TL; DR：分离您的顾虑：持久性和显示，迭代模板以显示每个倒计时。

如何使用Meteor / Mongodb进行最终倒计时？

1 个答案: