Select2 4.0和Knockout 3.1选择框无法选择

Question

我正在尝试让knockout（版本3.1）与select2（版本4.0rc2）配合使用。

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

以下是演示我的问题的fiddle。我在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: {  }">

- soulspamer

Answer 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。

- Kevin Brown-Silva

---

你的小提琴没有选择所需的初始值。另外，我希望它更新对象而不仅仅是ID，因为该对象在我的实际程序中还用于其他地方。 - soulspamer

在代码中，"ko.utils.setValue" 这个函数有什么作用吗？我只找到了一个出现的地方。 - Santhos

顺便提一下，如果您可以访问源数组并执行类似于myOptions.unshift({ id: undefined, text: undefined });的操作，则可以通过占位符解决问题。 - Santhos

@kevin brown 我认为真正的问题在于 select2: 绑定不是响应式的。你只是将它设置为空对象。在旧的 select2 3.x+ 代码中，我可以编写 { initSelection: function() { return thisKnockoutViewModel.Property(); } } - 你似乎没有一种方法在启动时初始化值。我试图遵循自定义数据适配器的方式，但它太奇怪了，我很困惑为什么你说它通常不需要，因为我编写的任何业务应用程序似乎都需要它。 - John Zabroski