Select2 4.0 和 Knockout 3.1 选择不允许选择

Posted 2023-05-07

【中文标题】Select2 4.0 和 Knockout 3.1 选择不允许选择

【英文标题】：Select2 4.0 and Knockout 3.1 select not allowing selection

【发布时间】：2015-05-19 04:52:27

【问题描述】：

我正在尝试让淘汰赛（3.1 版）与 select2（4.0rc2 版）一起工作。

我无法让选择接受输入并进行初始选择。选择似乎是只读的。

下面是一个演示我的问题的小提琴。我在 Chrome（版本 40.0.2214.115 m）上对此进行了测试。

http://jsfiddle.net/R8UF5/402/

javascript：

ko.utils.setValue = function (property, newValue)  if (ko.isObservable(property)) property(newValue); else property = newValue; ;

ko.bindingHandlers.select2 = 
init: function (element, valueAccessor, allBindingsAccessor) 
    var obj = valueAccessor(),
        allBindings = allBindingsAccessor(),
        lookupKey = allBindings.lookupKey;

    $(element).select2(obj);

    ko.utils.registerEventHandler(element, "select2-selected", function (data) 
        if ('selectedValue' in allBindingsAccessor()) 
            ko.utils.setValue(allBindingsAccessor().selectedValue, data.choice);
        
    );

    ko.utils.domNodeDisposal.addDisposeCallback(element, function () 
        $(element).select2('destroy');
    );
,
update: function (element, valueAccessor, allBindingsAccessor) 
    var options = allBindingsAccessor().select2Options || ;

    for (var property in options) 
        $(element).select2(property, ko.utils.unwrapObservable(options[property]));
    

    $(element).trigger('change');

;

// Constructor for an object with two properties
var Country = function(name, population, price) 
    this.countryName = name;
    this.countryPopulation = population;
    this.price = price;
    this.id = price;
    this.text = name;
;

var countries = [ new Country("UK", 65000000,1), new Country("USA", 320000000,2), new Country("Sweden", 29000000,3)];
var viewModel = 
    availableCountries : ko.observableArray(countries),
    selectedCountry : ko.observable(countries[1])
;
ko.applyBindings(viewModel);

html:

Your country:
<select style="width:100%;" data-bind="options: $root.availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry, 
                   select2:   ">

【参考方案1】：

这是一个更新的工作小提琴：http://jsfiddle.net/R8UF5/404/

您遇到的主要问题是 Knockout.js 将所有选项绑定到相同的 value 属性，该属性是空白的，并且 Select2 无法正确处理它。我可以通过将optionsValue: 'id' 传递给data-bind 属性来解决此问题，该属性正确地将value 属性设置为id。

另一个问题是 Select2 不再正确处理选择具有相同 value 的选项，我已经打开了一张票：https://github.com/select2/select2/issues/3163

【讨论】：

您的小提琴没有选择所需的初始值。此外，我不希望它更新对象而不仅仅是 Id，因为该对象在我的真实程序的其他地方使用。

“ko.utils.setValue”在代码中有什么作用吗？我只发现了一次。

顺便说一句，如果您可以访问源数组并执行类似 myOptions.unshift( id: undefined, text: undefined );

@kevin brown 我认为这里真正的问题是 select2: 绑定不是反应性的。您只需将其设置为一个空对象。在旧的 select2 3.x+ 代码中，我可以编写 initSelection: function() return thisKnockoutViewModel.Property(); - 你似乎没有办法在启动时初始化值。我正在尝试关注自定义数据适配器，但它太奇怪了，我很困惑为什么你说它不应该经常需要，因为我编写的任何业务应用程序似乎都需要它。