녹아웃을 사용할 때 jquery 클릭 이벤트가 실행되지 않습니다.

Question

knockout click binding documentation's "Note 3"에 따르면 녹아웃은 클릭 이벤트가 기본 기능을 수행하지 못하도록합니다. 이 동작을 무시하려면 내 처리기 함수에서 true를 반환하면됩니다.

<div data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

지금, 나는이 같은 버튼에 클릭 이벤트를 첨부 할 : 나는 함수에서 true를 반환하고있어

$(function() {  
    $('#btnParse').on('click', function() { alert('clicked'); return true;}); 
}); 

주 그래서,이 마크 업을 가지고있다. 이 짝수 처리기는 절대 실행되지 않습니다. 이 작품을 어떻게 만들 수 있습니까?

Answer 1

클릭 바인딩에서 참조하는 메모는 사용자 정의 클릭 핸들러가 아닌 viewmodel의 메소드를 참조합니다.

다른 말로하면 <button> 요소에 data-bind="click: doSomething"이 있으면 사용자 정의 처리기를 실행하려면 viewmodel의 doSomething() 메서드가 true를 반환해야합니다.

Answer 2

내 경우에는 observableArray를 사용하여 jQuery 마법을 배열의 각 항목에 적용해야했습니다. 나는 그 배열의 각 항목에서 두 개의 varibles를 가져 가고 싶지 않은 custom binding에 몇 가지 문제를 겪고있었습니다. 그래서, 제 포장에서 그 어두운 mnagic을 관찰 할 수없는 항목에 추가하여 이름이 클수록 그 곳으로 이동하는지도가 그 위치로 이동하게했습니다.

HTML :

<ul data-bind="foreach: filteredItems"> 
    <li class="seat"> 
     <span class="name" data-bind="text:fullName, click: toggleEmp"></span> 
    </li> 
</ul> 

CODE :이

Answer 3

내가 문제가 당신이 결합하려고하는 DOM의 녹아웃의 수정과 관련이있다 생각 도움이되기를 바랍니다

function viewModel() { 
    var vm = this; 
    vm.empData = function(data) { 
     var emp = this; 
     emp.office_x_loc = ko.observable(data.xLoc); 
     emp.office_y_loc = ko.observable(data.yLoc); 
     emp.toggleEmp = function() { 
      jQuery('#skyLineMap').lhpMegaImgViewer('setPosition', emp.office_x_loc(),emp.office_y_loc(), 0.8, false); 
    };//*/ 
}//*/ 

행사. 이 문제를 해결하려면 클릭 기능을 상위 요소 인 <div> 요소에 할당하십시오. 클릭 핸들러를 지정할 때 선택기에 오버로드를 사용하여 포함 된 버튼을 클릭 할 때만 클릭을 처리하도록 지정합니다.

<div id="btnContainer" data-bind="visible:Pages().length == 0"> 
    <div class="alert alert-info">Click "Parse" button.</div> 
    <button class="btn" id="btnParse" title="Parse Tabs">Parse</button> 
</div> 

을 그리고 다음에 스크립트를 변경 : 예를 들어, 다음과 같이 DIV를 변경

$(function() {  
    $('#btnContainer').on('click', '#btnParse', function() { alert('clicked');}); 
}); 

참고이 <div>는 DOM (템플릿, foreach 문을 수정하는 또 다른 논리 블록에 포함되어있는 경우 루프 등), #btnContainer 태그를 그러한 논리 블록의 일부가 아닌 <button>의 첫 번째 조상으로 설정해야 할 수 있습니다.

Answer 4

클릭 핸들러가 실행되지 않는 이유는 요소에 적용되지 않았기 때문입니다. 당신이 JQuery와이 작업을 수행 그래서 때

$('.some-class').on('some-event', someFunction); 

을 다음 처리기에 대한 해당 이벤트에 바인딩하려면 먼저 jQuery를 당신의 $('.some-class') 선택을 찾을 수 있습니다. 귀하의 경우, 대부분의 경우 #btnParse은 이벤트를 바인딩 할 때 녹아웃으로 페이지에 렌더링되지 않습니다. 또는 원본 요소가 렌더링되고 파괴 된 다음 다른 요소가 렌더링 될 수도 있습니다. 이 두 번째 시나리오에서는 이벤트 처리기가 단추 위에 남아 있지 않습니다.하나 개의 대안은 (내가하지 않는 것이 좋습니다 있음) document 수준에서처럼 DOM에서 핸들러 높은 최대 바인딩하고, 필터 만에 이벤트 ID가 #btnParse 뭔가들 :

$(document).on('click', '#btnParse', function() { console.log('hi'); }); 

이유 I 그것이 나쁜 knockout 연습이기 때문에 당신이 권장하는 다른 게시물로 click 바인딩을 사용해야합니다 것이 좋습니다 않습니다. 또한 id 속성을 사용하고 있습니다. 템플릿 동적 콘텐트에 대해서는 일반적으로 좋은 아이디어가 아닙니다. 고유 정적 요소에 대해 ID가 절대적으로 필요하지 않는 한 클래스를 사용하십시오.

knockout의 클릭 바인딩을 올바르게 사용하는 방법은 까다로운 점 중 하나는 녹아웃이 범위를 지정하는 방식을 이해해야한다는 것입니다. 또한

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction"></a> 
<!-- /ko --> 

경우 : 예를 들어, 당신은 루프 내부의 클릭을 결합하고, 당신이 당신의 기본보기 모델에서 핸들러를 원한다면, 당신은 루프가 당신의 컨텍스트를 변경하기 때문에 부모 범위를 참조 할 필요 그 물건 비트와 함께

<!-- ko foreach: someCollection --> 
    <a data-bind="click: $parent.someFunction.bind($parent)"></a> 
<!-- /ko --> 

재생하고 있다면 새로운 질문 : 당신은 당신이이 같이 클릭 핸들러를 바인드해야, 핸들러합니다 (this)로 실행하는 자바 스크립트 컨텍스트를 변경해야 여전히 혼란 스럽다. 행운을 빕니다!