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

Posted 2023-05-07

【中文标题】Knockout/Select2：触发 select2 根据可观察的选项更新进行更新

【英文标题】：Knockout/Select2: Triggering select2 to update based on an observable option updating

【发布时间】：2014-07-09 03:52:03

【问题描述】：

从 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/

【参考方案1】：

当您添加optionsValue: 'choice' 时，它似乎工作正常：

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

见fiddle