Knockout/Select2：觸發select2更新基於可觀察的選項更新

Question

從Knockout.js 2.x升級到3.x時，我注意到這不起作用：我有一個屏幕，我有一個<select>取決於一個可觀察的可觀察數組，然後用Select2包裝器包裝<select>。

現在，它曾經是，當更新一個選項observables時，select會更新。而且情況依然如此。但我無法同時正確更新Select2綁定。

我使用由Select2 Github page推薦的綁定處理：

ko.bindingHandlers["select2"] = { 
    after: ["options", "value", "selectedOptions"], 
    init: function (element, valueAccessor) { 
     $(element).select2(ko.unwrap(valueAccessor())); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).select2("destroy"); 
     }); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     //trying various methods to register interest with dependency checking 
     //var allBindings = allBindingsAccessor(); 
     //if (allBindings.options) { allBindings.options(); } 
     //if (allBindings.value) { allBindings.value(); } 
     //if (allBindings.selectedOptions) { allBindings.selectedOptions(); } 
     $(element).trigger("change"); 
    } 
}; 
(function() { 
    var updateOptions = ko.bindingHandlers["options"]["update"]; 
    ko.bindingHandlers["options"]["update"] = function (element) { 
     var ret = updateOptions.apply(null, arguments); 
     var $el = $(element); 
     if ($el.data("select2")) { $el.trigger("change"); } 
     return ret; 
    } 
})(); 
(function() { 
    var updateSelectedOptions = ko.bindingHandlers["selectedOptions"]["update"]; 
    ko.bindingHandlers["selectedOptions"]["update"] = function (element) { 
     var ret = updateSelectedOptions.apply(null, arguments); 
     var $el = $(element); 
     if ($el.data("select2")) { $el.trigger("change"); } 
     return ret; 
    } 
})(); 

下面是一個例子。您會注意到，如果更改表示select中項目的其中一個輸入的值，則不會更新Select2以匹配（但它會更新後備選擇）。

http://jsfiddle.net/mrmills/MfttX/1/

Answer 1

這似乎很好地工作，當你添加optionsValue: 'choice'：

<select data-bind="options: choices, 
        optionsText: 'choice', 
        optionsValue: 'choice', 
        select2: {}"></select> 

見fiddle