模板内的车把和倒计时

Question

使用Final Countdown Plugin和Handlebars.js。

两个插件都很好，分开。下面<div>会给我一个倒计时（这里倒计时2017年1月1日）：

  <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()以用新数据刷新我的模板。这意味着我也必须每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()与阿贾克斯之外更大的，但后来它不会因你的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。