选择的Knockout没有设置初始选择的选项

Question

我在使用Chosen和Knockout 3.3.0 设置最初选择的选项时遇到问题.

我已经实现了这个问题的自定义选择绑定,这对于选择元素非常有用:

ko.bindingHandlers.chosen = {
    init: function (element) {
        ko.bindingHandlers.options.init(element);
        $(element).chosen({ disable_search_threshold: 10 });
    },
    update: function (element, valueAccessor, allBindings) {
        ko.bindingHandlers.options.update(element, valueAccessor, allBindings);
        $(element).trigger('chosen:updated');
    }
};

问题是,如果我设置了初始值,它将不会显示为选中:

<select multiple class="chosen-select" data-bind="chosen: options,
                                        optionsText: 'Label',
                                        optionsValue: 'Id',
                                        selectedOptions: selected">
</select>

如果我使用常规选项绑定,它可以正常工作:

<select multiple data-bind="options: options,
                                        optionsText: 'Label',
                                        optionsValue: 'Id',
                                        selectedOptions: selected">
</select>

我已经将它们都实现为jsFiddle.如果更改了self.selectedobservableArray(),然后运行,则可以看到它反映在第二个中<select>,但在第一个中没有显示.

Answer 1

如果处于多选模式,您还必须使selectedOptions绑定正常工作.chosenselect

问题是,当您的selected可观察数组更改时,selectedOptions正确设置DOM中的选定选项但不会触发'chosen:updated'事件,因此chosen不会更新多选.

一种解决方案是创建一个新的chosenSelectedOptions委托给原始处理程序并触发以下事件的事件update:

ko.bindingHandlers.chosenSelectedOptions = {
            init: function (element, valueAccessor) {
                ko.bindingHandlers.selectedOptions.init(element, valueAccessor);
            },
            update: function (element, valueAccessor, allBindings) {
                ko.bindingHandlers.selectedOptions.update(element, valueAccessor, allBindings);
                $(element).trigger('chosen:updated');
            }
        };

并在绑定中使用它:

<select multiple class="chosen-select" data-bind="chosen: options,
                                            optionsText: 'Label',
                                            optionsValue: 'Id',
                                            chosenSelectedOptions: selected"></select>

演示JSFiddle.