옵션 바인딩이 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> 

이다