녹아웃 3.4 선택 부트 스트랩 selectpicker

Question

왜 Knockout 버전 3.4에서는 초기 값 selectPicker가 작동하지 않습니까? 녹아웃 3.0으로 작동합니다.

<select data-bind="selectPicker: teamID, items: teamItems, optionsText: 'text', optionsValue : 'id'"></select> 
<div>Selected Value(s) 
    <div data-bind="text: teamID"></div> 
</div> 
<button data-bind="click: setActive"> 
    Set active 
</button> 
<button data-bind="click: addStef"> 
    Add Stefan 
</button> 


function ViewModel() { 
var self = this; 
this.teamItems = ko.observableArray([ 
{ 
    text: 'Chris', 
    id: 1 
}, 
{ 
    text: 'Peter', 
    id: 2 
}, 
{ 
    text: 'John', 
    id: 3 
}]); 
//init value not working 
this.teamID = ko.observable(3); 
//// 
this.setActive = function() { 
    this.teamID(3); 
} 
this.addStef = function() { 
    this.teamItems.push({ text: "Stef", id: 4 }) 
} 
} 

ko.bindingHandlers.selectPicker = { 
init: function (element, valueAccessor, allBindingsAccessor) { 
    if ($(element).is('select')) { 
     $(element).addClass('selectpicker').selectpicker(); 
     if (ko.isObservable(valueAccessor())) { 
      if ($(element).prop('multiple') && $.isArray(ko.utils.unwrapObservable(valueAccessor()))) { 
       ko.bindingHandlers.selectedOptions.init(element, valueAccessor, allBindingsAccessor); 
      } else { 
       ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor); 
      } 
     } 
    } 
}, 
update: function (element, valueAccessor, allBindingsAccessor) { 
    if ($(element).is('select')) { 
     var options = allBindingsAccessor().items; 
     if (typeof options !== 'undefined' && options !== null) { 
      var isDisabled = allBindingsAccessor().disable || false; 
      if (ko.utils.unwrapObservable(options).length > 0) { 
       // call the default Knockout options binding 
       ko.bindingHandlers.options.update(element, options, allBindingsAccessor); 
      } 

      if (isDisabled) { 
       // the dropdown is disabled and we need to reset it to its first option 
       $(element).selectpicker('val', $(element).children('option:first').val()); 
      } 
      $(element).prop('disabled', isDisabled); 
     } 
     if (ko.isObservable(valueAccessor())) { 
      var value = ko.utils.unwrapObservable(valueAccessor()); 
      if ($(element).prop('multiple') && $.isArray(value)) { 
       ko.bindingHandlers.selectedOptions.update(element, valueAccessor); 
      } else { 
       // call the default Knockout value binding 
       ko.bindingHandlers.value.update(element, valueAccessor); 
      } 
     } 

    } 
} 
}; 

ko.applyBindings(new ViewModel()); 

문제는 라인이다 this.teamID = ko.observable (3);

선택한 값은 항상 배열의 첫 번째 요소와 같습니다.

Answer 1

업데이트 대답 :

<select data-bind="selectPicker:true, options:teamItems, value:teamID,optionsText:'text',optionsValue:'id'"></select> 

를 그런 다음 바인딩 핸들러 단지 :

이

대신 기능을 결합 모든 옵션을 포장, 당신은 단지 정확하게 모든 걸 할 것이다는 options 바인딩을 사용할 수 있습니다 옵션 및 값의 변경에 대해 응답해야합니다.

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

원문 답변 :

the valueAllowUnset binding을 추가하십시오. 어떤 시점에서 Knockout은 선택한 값이 옵션에 없다고 생각하므로 첫 번째 항목으로 재설정됩니다.

<select data-bind="selectPicker:teamItems,value:teamID,optionsText:'text',optionsValue:'id',valueAllowUnset:true"></select>