jQueryUI 组合框上的 KnockoutJS 数据绑定值答案

【问题标题】：KnockoutJS data-bind value on jQueryUI comboboxjQueryUI 组合框上的 KnockoutJS 数据绑定值
【发布时间】：2012-02-17 19:06:24
【问题描述】：

我在将 jQueryUI 组合框值绑定到我的 KnockoutJS ViewModel 中的计算 observable 时遇到问题。我发现了几个类似的问题，例如“autocomplete-combobox-with-knockout-js-template-jquery”和“knockoutjs-jquery-combobox-binding”，但都没有解决我的问题。

我认为这一切都源于 jQueryUI 组合框在更新底层选择时不会触发更改事件。

我这里做了一个例子...http://jsfiddle.net/farina/hLfWa/

【问题讨论】：

标签： jquery jquery-ui knockout.js

【解决方案1】：

主要的关键是挂钩到作为组合框一部分创建的自动完成小部件的select 事件。

类似：

$("#combobox").next("input").bind( "autocompleteselect", function(event, ui) {
    $("#combobox").val(ui.item.value).change();
});

When a value is selected it would change the value of the original select and fire the change event, which is picked up by the value binding.

更好的是使用自定义绑定来为您完成这一切。比如：

ko.bindingHandlers.combobox = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor();

        //initialize combobox    
        $(element).combobox();

        //when newly create input changes, then update model
        $(element).next("input").bind("autocompleteselect autocompletechange", function(event, ui) {
            observable(ui.item ? ui.item.value : "");
        });


    },
    update: function(element, valueAccessor) {
        //update the element's value, when the model changes
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).next("input").val(value);   
    }        
};

这是一个示例：http://jsfiddle.net/rniemeyer/6jWvZ/

该示例包括组合框和普通选择，因此您可以看到从模型（通过第二个选择）或组合框设置值。

【讨论】：

太棒了...RP Niemeyer 来救援了！你应该以此为生:)。说真的，谢谢！我一直在尝试进行自定义绑定，但我做错了。我认为这个例子只是帮助我在未来写得更好。

【解决方案2】：

首先，这是 RP Niemeyer 提供的一个非常好的解决方案。对我帮助很大！

然而， $("#combobox").next("input") 没有返回任何元素... 我还希望输入绑定到输入的更改事件。这样，您可以输入任何文本（也可以是空字符串）或从组合框中进行选择，它将始终绑定到您喜欢的可观察到的淘汰赛。

我把原来的解决方案代码改成这样：

init: function (element, valueAccessor) {
    var observable = valueAccessor();

    //initialize combobox    
    $(element).combobox().ready(function() {
        //when newly create input changes, then update model
        if ($(element).next().find("input") != null && $(element).next().find("input").length > 0) {
            $(element).next().find("input").bind("autocompleteselect", function (event, ui) {
                observable(ui.item ? ui.item.value : "");
            });

            $(element).next().find("input").change(function (event) {
                observable(event ? this.value : "");
            });
        }
    });
},
update: function (element, valueAccessor) {
        //update the element's value, when the model changes
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).next().find("input").val(value);
    }

最后我从 jquery 中选择的“组合框”小部件中删除了“_removeIfInvalid”函数

【讨论】：