Option Bindung funktioniert nicht mit Bootstrap class = "selectpicker" knockout.js

Question

Ich versuche Bootstrap selectpicker mit knockout.js Option Bindung zu verwenden.

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

Wenn ich nicht die Klasse selectpicker verwenden, funktioniert die Bindung perfekt. Es funktioniert jedoch nicht, wenn ich die Klasse verwende.

Dieser Link gefunden http://jsfiddle.net/c2gbak5m/2/, aber nicht auf meinem Fall.

Kann jemand bitte sagen Sie mir, wie dieses Problem zu lösen

Answer 1

Hier ist die Lösung, die ich gefunden, die für mich gearbeitet.

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); 
      } 
     } 
    }; 

Hier ist die Html

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