Question

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

我认为这一切都是因为jQueryUI组合框在更新基础选择时不会触发更改事件。

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

Answer 1

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

类似的东西：

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

当选择一个值时，它会更改原始选择的值并触发更改事件，该事件由value绑定拾取。

更好的方法是使用自定义绑定来完成所有这些操作。类似的东西：

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/

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

Answer 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中选择的“combobox”小部件中删除了“_removeIfInvalid”函数

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

2 个答案: