模板内的车把和倒计时

Question

使用 Final Countdown Plugin and Handlebars.js.

这两个插件单独运行都很好。下面的<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。通过对您的示例感到困惑，我现在可以使用我的设置，太棒了！我运行 function populate() 每 3-5 秒用新数据刷新我的模板。这意味着我还必须每 3-5 秒运行倒计时功能，即使 endTime 数据没有改变。我喜欢这样：

            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.

模板内的车把和倒计时

handlebars and countdown inside template

jquery

plugins

handlebars.js

countdown