2016-08-24 64 views
0

使用Final Countdown PluginHandlebars.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的解釋工作。也許通過調用倒計時帶來的額外負擔也是微不足道的......

回答

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

+0

謝謝!我編輯了我的上面的問題 –

+0

你每3到5秒鐘讀取哪些數據? – 76484

+0

我只是呼應編碼的JSON。我有'{{登記參與者}}',如果某些用戶註冊了「遊覽」,則可以增加。每個用戶都需要動態查看此更改(或每隔3-5秒)。正如你所知道的,每個巡演都有'{{endTime}}',這對每次巡演都是一個常數。隨着時間的推移可以添加更多的遊覽,但是模板循環「{{each this}}」處理這個。在未來,如果在服務器上發生更改而不是刷新3-5秒,我將使ajax運行,但點與Ajax內的倒計時鐘仍然相同... –