jquery - Knockout 3.0 输入选项卡关闭清除值

标签 jquery jquery-ui knockout.js jquery-ui-autocomplete knockout-3.0

我有一个项目,直到最近才使用 Knockout 2.3。当我们升级到 3.0 时,我们注意到,第一次失去对所述元素的关注时,我们对 jQuery 自动完成的绑定(bind)似乎不再保留其值。第一次在自动完成中清除该值并恢复对该元素的焦点后,就会发生正确的行为。

我们正在使用 RP Neimeyer 的 jQuery AutoComplete 绑定(bind)处理程序(对与此问题无关的一些自定义自动完成列表和行为进行了一些修改)http://jsfiddle.net/rniemeyer/YNCTY/

重点是,这种自动完成功能在 Knockout 2.3 中没有任何问题,但在我们升级后在应用程序中出现了问题。为了验证这个理论,我暂时降级到Knockout 2.3,问题就解决了。然而,永久降级到 2.3 也不是一个选择,因为 observableArray 更改功能已添加到 3.0,我们正在将其用于新功能。

我们的绑定(bind)如下所示:

<input id="stateIdAutoComplete" maxlength="50" data-bind="jqAuto: { autofocus: false }, jqAutoSource: stateIdFilterList, jqAutoSourceLabel: 'enteredValue', jqAutoSourceInputValue: 'value', jqAutoValue: stateIdFilterSelected, value: stateIdFilter, valueUpdate: 'input', tabEnterKey: keyPressEvent, attr: { placeholder: stateIdPlaceHolder }, preventBubble: 'click'" />

View 模型如下所示:

function viewModel(){
var self = this;

self.stateIdFilterList = ko.observableArray([{
    enteredValue: '1',
    value: '1'
},{
    enteredValue: '2',
    value: '2'
}, {
    enteredValue: '3',
    value: '3'
}]);

self.stateIdFilterSelected = ko.observable();

self.stateIdFilter = ko.observable();

self.stateIdPlaceHolder = 'State ID';

self.keyPressEvent = function(data){

};

}

有一个更广泛的代码版本,包括必要的自定义绑定(bind)处理程序(虽然不是全部,但足以证明问题),可以在 http://jsfiddle.net/aaronbastian/xYm6U/6/ 找到。

要重新创建该行为,只需开始在自动完成中输入可识别的值即可。自动完成框打开后,从该输入跳到下一个输入。输入中的值完全清除。如果您在自动完成中完成输入值(未选择它)并关闭,甚至会发生这种情况。

在此示例中,预计关闭选项卡不会清除自动完成,无论输入的值是否包含在列表中的一项中。

对此的任何帮助将不胜感激。谢谢!

最佳答案

看来原始的jqAuto 绑定(bind)被设计为与内置value 绑定(bind)分开工作,并且不需要内置的value 绑定(bind)。您同时使用两者,似乎它们互相踩到了对方的脚趾。

我没有尝试太深入地研究代码,但我能够跟踪哪一部分正在清除输入字段。它来自jqAuto.update函数。通过删除这个功能,我能够解决这个问题。我也看不出在您的示例中删除它有任何缺点。我认为这是正确的,因为 value 绑定(bind)处理更新输入字段。

http://jsfiddle.net/xYm6U/7/

关于jquery - Knockout 3.0 输入选项卡关闭清除值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22250218/

相关文章:

javascript - 如何停止事件传播到具有相同类的其他元素?

php - 像在 JQuery 中一样在 JavaScript 中调用函数

javascript - jQuery CheckBox 选择器 .attr('checked) 不工作?

javascript - 使用 jQuery UI Autocomplete,如何确保无论输入什么文本都会出现一个特定的结果?

html - 如何使 div 的整个区域都可以点击,同时排除该区域顶部的复选框?

javascript - HTML5 视频未使用 .load() 返回海报图像

JavaScript/jQuery 在两个输入字段都填写时专门更改标签的类

jquery:如何更新可拖动克隆ID?

knockout.js - 与外部数据绑定(bind)knockoutjs

javascript - 当 observableArray 是其他模型的属性时,Knockout 不会更新 UI