템플릿 내부의 핸들 및 카운트 다운

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}}에 대한 카운트 다운을 받으시겠습니까? 위의 카운트 다운 플러그인을 도우미에 넣으려고했으나 성공하지 못하고 조금 더러워졌습니다. 미리 감사드립니다.

편집 : 결과 76484 @

감사합니다. 당신의 모범을 보면서 나는 이제 내 설치와 함께 작동하게되었습니다. 새 데이터로 템플릿을 새로 고치기 위해 매 3-5 초마다 function populate()을 실행합니다. 이제는 endTime 데이터가 변경되지 않더라도 3 ~ 5 초마다 카운트 다운 기능을 실행해야한다는 것을 의미합니다. 나는 카운트 다운 타이머가 아약스이 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을 추가하여이를 가능하게됩니다 : 우리는 DOM에 대한 우리의 카운트 다운의 모든 요소를 ​​추가 한 후

는

<script type="mustache/x.tmpl" id="helloTmpl"> 
    {{#each this}} 
     <div data-countdown="{{.}}"></div> 
    {{/each}} 
</script> 

, 우리는 플러그인을 호출 할 준비가되어 있습니다. 우리는 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입니다.