Meteor.js의 Jquery 날짜 선택 도구

Question

내 프로젝트에서 jquery datepicker를 사용하려고하는데 편집 모드에서 사용자를 표시하려고합니다. if 문없이 사용하면 완벽하게 작동하지만 if 문을 넣으면 렌더링되지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? 내가 날짜 선택기

Template.assignmenttodositem.rendered = function() { 
$('.datepicker').datepicker();  
}; 

렌더링 곳

이

이 내 템플릿 이벤트 내가 문

있는지 확인

Template.assignmenttodositem.events({ 

...... 
'dblclick .eventduedate':function(evt,tmpl){ 
    evt.preventDefault(); 
    Session.set('editingduedate', this._id); 
} 
.......... 

이것은 내 템플릿

{{#if editing_duedate}} 
     <input class="datepicker" name="date"> 
    {{else}} 
     <div class="row text-center"> 
       <div class="eventduedate"> 
        {{duedate}} 
       </div> 
     </div> 
    {{/if}} 

이의 일부입니다

Template.assignmenttodositem.editing_duedate = function() { 
    return Session.equals('editingduedate', this._id); 
}; 

Answer 1

HTML

<template name="assignmenttodositem"> 
    {{#if editing_duedate}} 
    {{> datepicker}} 
    {{else}} 
    ... 
    {{/if}} 
</template> 

<template name="datepicker"> 
    <input class="datepicker" name="date"> 
</template> 

JS

Template.datepicker.rendered=function(){ 
    this.$('.datepicker').datepicker(); 
}; 

rendered 콜백 번만 템플릿 인스턴스가 DOM에 삽입되었을 때 실행되고 다음을 포함하는 바깥 템플릿의 datepicker 초기화 트리거링 #if 문은 실행될 때 else 상태이므로 실행되지 않습니다. 입력이 아직 없습니다.

이 문제를 간단히 해결하려면 자체 템플릿의 날짜 피커를 이동하십시오 (프로그래밍 할 때마다 언제든지 주 작업을 더 쉽고 해결하기 쉬운 작업으로 분해 할 수있는 좋은 디자인 패턴으로 간주되었습니다). 렌더링 된 콜백은 적절한 시간에 실행됩니다.

Answer 2

Rendered은 템플릿이 렌더링 될 때 한 번만 실행됩니다. 그 당시 else 부분은 HTML에 들어 있지 않으므로 .datepicker 부분을 찾을 수 없습니다. editinduedate 변수가 업데이트되었는지 확인한 다음 datePicker 구성 요소를 만들어야합니다.

Template.assignmenttodositem.rendered = function() { 
    var self = this; 
    this.autorun(function(){ 
    if(Session.equals("editingduedate", self.data._id)){ 
     $('.datepicker').datepicker();  
    } 
    }) 
}; 

Answer 3

datepicker를 자신의 템플릿에 넣습니다. 그런 다음 template.datepicker.rendered에서 datepicker를 초기화합니다. 'this'컨텍스트를 잊어 버리면 작동하지 않습니다. 있는지 확인 template.datepicker.rendered는 HTML의 날짜 선택기의 다음 #datepiker이 ID를 참조

this.$('#datepicker').datepicker(); 

= '날짜 선택기를'이 포함되어 있습니다.