淘汰賽3.4 select bootstrap selectpicker

Question

爲什麼初始值selectPicker不適用於Knockout版本3.4？用Knockout 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

更新答案：

而是包裹所有選項綁定功能，你可以只使用options綁定，這將正確地做了這一切：

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

那麼你綁定的處理程序只是需要確保它響應選項和值的更改：

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>