knockout.js - Knockout with Chosen 不会设置初始选择的选项

Question

我无法使用 Chosen 设置最初选择的选项和 knockout 3.3.0。

我已经从 this question 实现了自定义选择绑定(bind)，这对于选择元素非常有用:

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>

如果我使用常规选项绑定(bind)，它可以正常工作:

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

我已经将两者都实现为 jsFiddle .如果您更改 self.selected observableArray()，然后运行，可以看到第二个 <select>中体现出来了，但第一个没有显示。

Answer 1

您还必须争论 selectedOptions绑定(bind)以与 chosen 一起正常工作如果 select处于多选模式。

问题是当你的 selected可观察数组更改 selectedOptions正确设置 DOM 中的选定选项，但不会触发 'chosen:updated'事件所以chosen多选未更新。

一种解决方案是创建一个新的 chosenSelectedOptions它委托(delegate)给原始处理程序并触发 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');
            }
        };

并在您的绑定(bind)中使用它:

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

演示 JSFiddle .