爲什麼jQuery UI可拖動會干擾Knockout JS數據綁定？

我想了解爲什麼在下面的代碼中將一個包含div的jQuery UI拖放到可拖動狀態中會改變Knockout JS數據綁定的行爲。爲什麼jQuery UI可拖動會干擾Knockout JS數據綁定？

在對輸入框中的文本進行更改的第一個div（可拖動）中，並立即單擊Save不會導致更改反映在observable中。在第二個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>

用下面的JavaScript支持：

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

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

您可以在此的jsfiddle看到在行動代碼：http://jsfiddle.net/NLzg2/

如果您將可拖動輸入框中的文本更改爲Cath並單擊「保存」，則警報顯示「Cat」。但是，如果您在固定輸入框中執行相同操作，則警報將顯示「Cath」。所以在第二種情況下，淘汰賽已經發現了價值的變化，而在第一種情況下，它沒有。

我知道我可以通過使用Knockout valueUpdate綁定來強制它在每次按鍵後更新綁定的observable來獲得所需的效果。像這樣：

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

我也知道，如果我改變了<跨度>到<按鈕>我得到我所期望的行爲。

我想明白的是爲什麼會發生這種情況，以及如何實現我想要的效果（即，可拖動並且具有正常的Knockout值綁定在其中的元素上），而無需使用valueUpdate綁定或者使用一個按鈕來解決這個問題。

來源

2013-08-25 vextasy

似乎jQuery UI可拖動正在影響模糊事件，這就是爲什麼它在你指定'valueUpdate'綁定時起作用的原因。這裏描述了一個類似的錯誤：http://stackoverflow.com/questions/1724743/using-jquery-setting-draggable-on-an-element-prevents-blur-from-firing-when-you –

draggable插件捕獲鼠標以提供其功能。所以，當你點擊你的span插件處理點擊事件和淘汰賽沒有得到通知。

它在您使用button時起作用，因爲按鈕被排除在可拖動插件的效果之外。

所以，你需要你的span從draggable插件使用的cancel option例如使用標記類的幫助排除：

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

演示JSFiddle。

來源

2013-08-25 17:36:13 nemesv

爲什麼jQuery UI可拖動會干擾Knockout JS數據綁定？

回答

相關問題