模板內的車把和倒計時

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。