2012-03-17 4 views
3

나는 다음과 같은 KnockoutJS 템플릿 (jquery.tmpl 렌더링)이 있습니다KnockoutJS - 템플릿에 이벤트를 클릭

<script id="contactsTemplate" type="text/html"> 
    <li data-bind="click: contactViewModel.test">${DisplayName}</li> 
</script> 

<ul id="contact-list" data-bind="template: {name: 'contactsTemplate', foreach:contacts}"> 
</ul> 

다음과 같은 모델 뷰 :

var contactViewModel = function (contacts) { 
var self = this; 

self.contacts = contacts; 

self.test= function() { 
    console.log("CLICK"); 
} 

내가이 코드를 사용하는 경우, 클릭을 이벤트가 발생하지 않습니다. 내가 같이 익명 함수를 작성하는 경우 :

Uncaught TypeError: Object function (contacts) { 
var self = this; 
self.contacts = contacts; 
self.test= function() { 
    console.log("CLICK"); 
} 
} has no method 'test' 

솔루션

솔루션은 다음과 같습니다 : $ 부모

<script id="contactsTemplate" type="text/html"> 
    <li data-bind="click: function(){contactViewModel.test()}">${DisplayName}</li> 
</script> 

을 나는 다음과 같은 예외를 얻을.

data-bind="click: $parent.test" 

답변

3

귀하의 contactViewModel 기능은 그러나이 기능을 통해 구축 된 개체의 인스턴스처럼 사용하려고, 생성자 함수입니다. contactViewModelcontactsTemplate 템플릿에 바인딩하려는 연락처의 배열을 노출합니다. 이러한 이유로이 템플릿 내의 모든 바인딩의 '컨텍스트'는 배열 내의 객체 인스턴스입니다. 부모 개체의 기능, 즉 contactViewModel에 결합하기 위해 사용하는 녹아웃 의사 변수 2.0 부모 :

data-bind="click: $parent.test" 
+0

그가 첫 번째 요소를 추가 한 후에는,이 깨진다, 작동하지 않는 것 같다. 내 바인딩 : ko.applyBindings (새 ​​contactViewModel (연락처), $ ("# contact") [0]); –

+0

@ KaffeeBohne - 아 ... 네 문제를 안다. 나는 나의 대답을 업데이트했다. – ColinE

관련 문제