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

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/

样本包括组合框和普通选择,因此您可以看到从模型(通过第二个选择)或组合框设置值.