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

时间:2014-03-07 12:32:43

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

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

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

关键是,这个自动完成在Knockout 2.3中没有任何问题,但在我们升级后在应用程序中被破坏了。为了测试这个理论,我暂时降级到Knockout 2.3,问题得到了解决。然而,永久降级到2.3也不是一个选项,因为我们正在使用新功能添加到3.0的observableArray更改功能。

我们的绑定看起来像这样:

<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'" />

,视图模型如下所示:

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){

};

}

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

要重新创建行为,只需在自动填充中键入已识别的值即可。在自动完成框打开后,选中该输入并转到下一个输入。输入中的值完全清除。如果您在自动完成中键入值(不选择它)并选中表格,则会发生这种情况。

在此示例中,无论输入的值是否包含在列表中的某个项目中,预计关闭选项卡都不会清除自动填充。

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

1 个答案:

答案 0 :(得分:2)

原始的jqAuto绑定似乎与内置value绑定分开工作,而不是必需。你们两个都在一起使用,似乎他们互相踩着脚趾。

我没有尝试过深入代码,但我能够跟踪哪个部分正在清除输入字段。它来自jqAuto.update函数。通过删除此功能,我能够解决问题。在你的例子中,我也无法看到删除它的任何缺点。我认为这是真的,因为value绑定处理更新输入字段。

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