ノックアウト3.4 select bootstrap selectpicker

Question

なぜノックアウトバージョン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

更新答え：

代わりの機能を結合すべてのオプションを包む、あなただけ正確にそのすべてを行いますされ、結合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>