淘汰赛 3.4 select bootstrap select 选择器

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>

淘汰赛 3.4 select bootstrap select 选择器

knockout 3.4 select bootstrap selectpicker

select

twitter-bootstrap

knockout.js

ko-custom-binding