【问题标题】:Knockout 3.0 input tab off clears valueKnockout 3.0 输入选项卡关闭清除值
【发布时间】:2014-04-10 14:35:20
【问题描述】:

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

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

关键是,这个自动完成功能在 Knockout 2.3 中没有问题,但在我们升级后在整个应用程序中被破坏了。为了验证这个理论,我暂时降级到了 Knockout 2.3,问题就解决了。然而,永久降级到 2.3 也不是一种选择,因为我们正在将 observableArray 更改功能添加到 3.0 中,我们正在使用它来实现新功能。

我们的绑定如下所示:

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

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

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

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

【问题讨论】:

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


    【解决方案1】:

    似乎最初的jqAuto 绑定被设计为与内置的value 绑定分开工作,而不需要内置的value 绑定。您同时使用两者,似乎它们正在踩对方的脚趾。

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

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

    【讨论】:

    • 哇。谢谢!我怀疑这在 Knockout 2.3 中起作用的原因是因为 3.0 的绑定现在独立刷新了。虽然此更改“破坏”了现有代码,但我对这一更改感到满意,因为它鼓励我们拥有更好的编码实践。非常感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-02-06
    • 2019-12-01
    相关资源
    最近更新 更多