knockout (템플릿 바인딩) : 템플릿 내부에서 호출되지 않는 javacript (JQuery) 함수

Question

메인 페이지에 템플릿 참조 데이터 바인딩과 htm이있는 duv 컨테이너가 있고 본문 내부에서 참조되는 모든 스크립트가 있습니다. 거기에 묶여있다.

문제는 Jquery에서 제어하는 ​​제 기능이 제대로 작동하지 않습니다. 예 : 날짜 선택 도구는 자바 스크립트가 참조되는 기본 페이지에 넣을 때 작동하지만 템플릿에 바인딩되는 htm 내부에서는 작동하지 않습니다.

모든 라이브러리가 제대로로드되고 있지만 내 jquery 기능이 템플릿 내부에서 호출 될 때 작동하지 않습니다.

메인 페이지 :

<script src="Scripts/jquery.js" type="text/javascript"></script> 
<script src="Scripts/jquery.qtip.js"></script> 
<script src="Scripts/foundation.min.js"></script> 
<script src="Scripts/jquery.tablesorter.js"></script> 
<script src="Scripts/jquery-ui.js"></script> 
<script src="Scripts/languageswitcher.js"></script> 

<div id="Container" ua-app-id="topVm" data-bind='template: {name: pageModel, data: pageVM }'>     
</div> 
<!-- Initialize JS Plugins --> 
<script src="Scripts/app.js"></script> 

---

지금 내보기가 실행시 메인 페이지에로드되는. 내보기 안에 데이트 피커가 있는데 작동하지 않습니다. 내가 메인 페이지에 넣었을 때 잘 동작합니다.

Answer 1

템플릿이 렌더링되기 전에 jQuery 코드가 실행되기 때문입니다. 템플릿 바인딩에서 제공되는 afterRender 콜백을 사용하여 datepicker를 활성화 할 수 있습니다. 자세한 내용과 예제는 documentation을보십시오.

그러나이를 수행하는 더 좋은 방법은 맞춤 바인딩을 만드는 것입니다. 이런 식으로 뭔가 :

ko.bindingHandlers.datepicker = { 
    init: function(element){ 
     $(element).datepicker(); 
    }, 
    update: function(element) { 
     $(element).datepicker('refresh'); 
    } 
}; 

그런 다음 당신이 수행하여 날짜 선택기에 텍스트 입력을 할 수 있습니다 :

<input type="text" data-bind="datepicker:true" /> 

사용자 정의 바인딩에 대한 자세한 내용은 here