왜 jQuery UI가 드래그 가능한가 Knockout JS 데이터 바인딩을 방해합니까?

Question

다음 코드에서 드래그 가능한 jQuery UI로 포함 div를 만드는 것이 Knockout JS 데이터 바인딩의 동작을 변경하는 이유를 알고 싶습니다.

입력 상자의 텍스트를 변경하고 즉시 저장을 클릭하는 첫 번째 div에서는 변경 사항이 관찰 가능 항목에 반영되지 않습니다. 두 번째 DIV (드래그하지 않은)의 변화는 관찰에 반영되어 다음 지원하는 자바 스크립트와

<div id='draggable'> 
    <h3>Draggable</h3> 
    <input data-bind='value: detail'></input> 
    <span data-bind='click: saveEdit'>Save</span> 
</div> 
<div id='fixed'> 
    <h3>Fixed</h3> 
    <input data-bind='value: detail'></input> 
    <span data-bind='click: saveEdit'>Save</span> 
</div> 

:

이

VM = { 
    detail: ko.observable('Cat'), 
    saveEdit: function(){ 
     alert(this.detail()); 
    } 
}; 

$(document).ready(function() { 
    $("#draggable").draggable(); 
    ko.applyBindings(VM); 
}); 

당신이 jsFiddle에서 행동의 코드를 볼 수 있습니다 : http://jsfiddle.net/NLzg2/

드래그 가능한 입력 상자의 텍스트를 Cath로 변경하고 '저장'을 클릭하면 알림에 '고양이'가 표시됩니다. 그러나 고정 된 입력 상자에서 동일한 작업을 수행하면 경고 메시지가 'Cath'로 표시됩니다. 따라서 두 번째 경우에는 Knockout이 가치 변화를 감지했으며 첫 번째 경우에는 그렇지 않습니다.

knockout valueUpdate 바인딩을 사용하여 각 키 누르기 후에 바인딩 된 관찰 가능 업데이트하도록 강제로 원하는 효과를 얻을 수 있다는 것을 알고 있습니다. 그래서 같이 :

<input data-bind='value: detail, valueUpdate: "afterkeydown"'></input> 

나는 또한 내가 < 버튼 >에 < 범위 >을 변경하면 내가 예상 동작을 얻을 것을 알고있다.

내가 이해하고 싶은 것은 왜 이것이 일어나고 있는지, 그리고 valueUpdate 바인딩으로 코드를 페인팅하지 않고 원하는 효과 (예 : 드래그 가능하고 그 안에있는 요소에 일반 Knockout 값 바인딩이 있음)를 얻을 수있는 이유입니다. 또는 버튼을 사용하여 문제를 해결할 수 있습니다.

Answer 1

draggable 플러그인은 기능을 제공하기 위해 마우스를 캡처합니다. 따라서 span을 클릭하면 플러그인이 클릭 이벤트를 처리하고 녹아웃 알림을받지 못합니다.

버튼이 드래그 플러그인의 효과에서 제외되기 때문에 button을 사용할 때 작동합니다.

그래서 당신은 마커 클래스의 도움으로 예를 들어 cancel option를 사용하여 spandraggable 플러그인에서 제외해야합니다

$("#draggable").draggable({cancel: "input,textarea,button,select,option,.save"}); 

데모 JSFiddle을.