選項綁定不工作與引導class =「selectpicker」knockout.js

Question

我想使用bootstrap selectpicker與knockout.js選項綁定。

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

如果我不使用class 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>