オプションバインディングはbootstrap class = "selectpicker" knockout.jsで動作しません

Question

knockout.jsオプションバインディングでブートストラップのselectpickerを使用しようとしています。

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

私がクラスselectpickerを使用しない場合、バインディングは完全に動作しています。ただし、クラスを使用すると動作しません。

このリンクが見つかりませんでした。私の場合は動作しません。http://jsfiddle.net/c2gbak5m/2/

は誰がどのようにこの問題ここ

Answer 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> 

です