テンプレート内のハンドルバーとカウントダウン

Question

Final Countdown PluginとHandlebars.jsを使用しています。

両方のプラグインは素晴らしい、別々に動作します。 <div>を以下は私のカウントダウン与えるだろう（2017年1月1日にここをカウントダウン）：{{endTime}}は、私が希望終了時間である

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

：

  <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> 

は、私はここで簡単なハンドルの例を持っています（2017/01/01の代わりに）へのカウントダウン。これは{{#each}}ループ内にあり、多くは{{endTime}}を実行します。

これを可能にするアイデアは誰も知っていますか？ {{endTime}}ごとにカウントダウンしますか？私は上記のカウントダウンプラグインをヘルパーに入れようとしましたが、成功しておらず、ちょっと乱雑になりました。前もって感謝します。

EDIT：結果76484 @

感謝。あなたの例を困惑させることによって、私はセットアップでうまく動作するようになりました。新しいデータでテンプレートを更新するために、私はfunction populate()を3〜5秒ごとに実行します。これで、endTimeのデータは変更されませんが、3〜5秒ごとにカウントダウン機能を実行する必要があることを意味します。私はカウントダウンタイマーは、Ajaxでこのfunction populate()外であることができれば、さらに大きくなるだろうと感じ何らかの理由

  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')); 
          }); 
         }); 

        } 
       }) 
      } 

、しかし、それは文句を言わないあなたのDOMの説明のために働く：私はこのように行います。おそらく、カウントダウンを呼び出すことによる余計な負担はあまりにも小さいです...

Answer 1

あなたがしようとしていることについては何も難しいことはありません。唯一のルールは、endTime要素がに追加されてから、プラグインを呼び出す必要があることです。

テンプレートにプラグインがバインドされる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に私たちのカウントダウンのすべての要素を追加した後。

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です：私たちは、その後、data-countdown属性を持つ各要素をループ、この属性からfinalDate値を取得し、その要素のためのプラグインを呼び出します。