Question

我想了解为什么在以下代码中将包含div放入可拖动的jQuery UI中会改变Knockout JS数据绑定的行为。

在第一个div（可拖动）中，对输入框中的文本进行更改并立即单击“保存”不会导致更改反映在observable中。在第二个div（不可拖动）中，更改反映在observable中：

<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检测到了值的变化，而在第一种情况下它没有。

我知道我可以通过使用Knockout valueUpdate绑定来强制它在每次按键后更新绑定的observable，从而达到预期的效果。像这样：

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

我也知道如果我更改＆lt; span＆gt;到＆lt;按钮＆gt;我得到了我期望的行为。

我想了解的是为什么会发生这种情况，以及如何实现我想要的效果（即可拖动并且对其中的元素具有正常的Knockout值绑定），而不必使用valueUpdate绑定或用一个按钮围绕这个问题。

Answer 1

draggable插件捕获鼠标以提供其功能。因此，当您点击span时，插件会处理点击事件，并且无法通知淘汰赛。

当您使用button时它会起作用，因为按钮被排除在可拖动插件的效果之外。

因此，您需要使用cancel option从span插件中排除draggable，例如在标记类的帮助下：

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

演示JSFiddle。

为什么jQuery UI可拖动会干扰Knockout JS数据绑定？

1 个答案: