选项绑定不适用于 bootstrap class="selectpicker" knockout.js答案

【问题标题】：Option binding is not working with bootstrap class="selectpicker" knockout.js选项绑定不适用于 bootstrap class="selectpicker" knockout.js
【发布时间】：2017-07-25 03:53:49
【问题描述】：

我正在尝试将 bootstrap selectpicker 与 knockout.js 选项绑定一起使用。

<select class="selectpicker" data-live-search="true" data-bind="options: responseData,optionsText: 'categoryName',optionsValue: 'categoryId',optionsCaption: ' ---- select ...'">

如果我不使用类 selectpicker，则绑定工作正常。但是，如果我使用该类，它就不起作用。

找到此链接 http://jsfiddle.net/c2gbak5m/2/ 但不适用于我的案例。

谁能告诉我如何解决这个问题

【问题讨论】：

标签： jquery knockout.js knockout-2.0 knockout-mapping-plugin knockout-3.0

【解决方案1】：

这是我发现对我有用的解决方案。

var CategoryViewModel = {
    responseData: ko.observableArray(),
    selectCategory: ko.observable()
   }

ko.bindingHandlers.selectPicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            if ($(element).is('select')) {
                if (ko.isObservable(valueAccessor())) {
                    if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) {
                        // in the case of a multiple select where the valueAccessor() is an observableArray, call the default Knockout selectedOptions binding
                        ko.bindingHandlers.selectedOptions.init(element, valueAccessor, allBindingsAccessor);
                    } else {
                        // regular select and observable so call the default value binding
                        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
                    }
                }
                $(element).addClass('selectpicker').selectpicker();
            }
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            if ($(element).is('select')) {
                var isDisabled = ko.utils.unwrapObservable(allBindingsAccessor().disable);
                if (isDisabled) {
                    // the dropdown is disabled and we need to reset it to its first option
                    $(element).selectpicker('val', $(element).children('option:last').val());
                }
                // React to options changes
                ko.unwrap(allBindingsAccessor.get('options'));
                // React to value changes
                ko.unwrap(allBindingsAccessor.get('value'));
                // Wait a tick to refresh
                setTimeout(() => { $(element).selectpicker('refresh'); }, 0);
            }
        }
    };

这里是 HTML

<select class="selectpicker" data-live-search="true" data-bind="selectPicker:true, options:responseData, value:selectCategory,optionsText:'categoryName',optionsValue:'categoryId', optionsCaption: ' ---Select Category---'">    
                                    </select>

【讨论】：