Question

这两个插件分别很好用。以下<div>将给我一个倒计时（这里是2017/01/01的倒计时）：

         <div id="getting-started"></div>
         <script type="text/javascript">
            $("#getting-started").countdown("2017/01/01", function(event) {
               $(this).text(
                  event.strftime('%D days %H:%M:%S')
               );
            });
         </script>

我在这里有一个简单的把手示例：

        <script type ="mustache/x.tmpl" id="helloTmpl">
           {{#each this}}
              {{endTime}}
           {{/each}}
        </script>

{{endTime}}是我希望倒计时的结束时间（而不是2017/01/01）。它位于{{#each}}循环内，会运行许多{{endTime}}。

任何人都知道这样做的想法吗？每个{{endTime}}都要倒计时？我试着将上面的倒计时插件放到帮助器中，但没有成功，它变得有点乱。提前谢谢。

编辑：结果

谢谢@ 76484。通过对你的例子感到困惑，我现在可以使用我的设置了，太棒了！我每隔3-5秒运行function populate()以使用新数据刷新我的模板。现在这意味着即使endTime数据没有变化，我也必须每3-5秒运行一次倒计时功能。我喜欢这个：

            function populate()
            {

                var url = apiurl + 'api/myGreatData';
                $.ajax
                ({
                    type: 'POST',
                    cache: false, 
                    url: url,
                    dataType: 'json',
                    success: function (response) 
                    {
                        var source = document.getElementById("helloTmpl").innerHTML;

                        var tmpl= Handlebars.compile(source);

                        var html = tmpl(response);

                        var box = document.getElementById("box");

                        box.innerHTML = html;

                        // Countdown Timer
                        $('[data-countdown]').each(function (index, el) {
                            var $el = $(el);
                            var finalDate = $el.attr('data-countdown');

                            $el.countdown(finalDate, function (event) {
                                $(this).text(event.strftime('%D days %H:%M:%S'));
                            });
                        }); 

                    }
                })
            }

出于某种原因，如果倒数计时器可能超出此function populate()并带有ajax，我觉得它会更大，但是由于你的DOM解释它不会起作用。也许通过召唤倒计时的额外负担也太微不足道了......

Answer 1

你想做什么并不困难。唯一的规则是您必须确保在调用插件之前将endTime元素添加到DOM 中。

您需要在模板中添加一个插件将被绑定的HTML元素。此外，我不知道endTime是什么，因为您没有包含您的数据结构。我将假设一个更简单的数据结构 - 一个结束时间字符串数组：

var endTimes = [ '2017/01/01', '2018/02/02', '2019/03/03' ];

我们需要一种方法来获取每个倒计时元素我们调用插件的最终日期。我将通过向模板中的元素添加数据属性data-countdown来实现此目的：

<script type="mustache/x.tmpl" id="helloTmpl"> {{#each this}} <div data-countdown="{{.}}"></div> {{/each}} </script>

一旦我们将所有倒计时元素添加到DOM，我们就可以调用插件了。我们将使用data-countdown属性遍历每个元素，从此属性获取finalDate值，然后调用该元素的插件：

var template = Handlebars.compile($('#helloTmpl').html()); $('#Container').html(template(endTimes)); $('[data-countdown]').each(function (index, el) { var $el = $(el); var finalDate = $el.attr('data-countdown'); $el.countdown(finalDate, function (event) { $(this).text(event.strftime('%D days %H:%M:%S')); }); });

这是example in a fiddle。

把手和倒计时模板内

1 个答案: