Knockout/Select2：触发 select2 根据可观察的选项更新进行更新

Question

从 Knockout.js 2.x 升级到 3.x 时，我注意到这不起作用：我有一个屏幕，其中我有一个 <select> 取决于可观察的可观察数组，我包装了 @987654324 @ 带有 Select2 包装器。

现在，它通常是在更新选项观察到之一时，选择将更新。情况仍然如此。但我无法同时正确更新 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