将 select2.js 与多个选择 optgroup 和 knockoutJS 一起使用

Question

我正在尝试通过 optgroup 使用 knockoutJS 实现多选数据绑定。此外，我们还想使用 select2 的搜索和显示功能。

Here is the fiddle sample.

当使用 html 控件直接添加项目时，一切正常。您可以在上面的示例中选择一些国家，然后单击查看按钮，可以看到这些国家的代码被很好地检索到了。但是，我想以另一种方式填充这些项目。准确地说，我创建了一个命令来刷新包含所选项目的可观察数组，并强制选择可用选项列表中的第一项（在我们的示例中是国家老挝）。此命令在单击第二个按钮时执行。

单击后一个按钮后，您可以通过单击第一个按钮检查可观察的 selectedCountries 是否包含预期值。不幸的是，UI 控件没有刷新，你知道怎么做吗？我的视图的 html databiding 看起来像

<select class="multi-select" data-bind="foreach: availableCountries,selectedOptions:selectedCountries" multiple="multiple">
    <optgroup data-bind="attr: {label: label}, foreach: children">
        <option data-bind="text: display, value: code"></option>
    </optgroup>
</select>

Answer 1

简短的回答是 Select2 不知道您对基础模型所做的更改。

我能够使用 hack 使您的示例工作，请参阅此处：http://jsfiddle.net/bXPM6/

所做的更改是：

<select id="foo" class="multi-select" data-bind="foreach: availableCountries, selectedOptions:selectedCountries" multiple="multiple">

（注意添加的id=foo）。

我添加了对 observable 的订阅：

function MyViewModel(){
    var self = this;
    self.availableCountries = ko.observableArray(app.availableCountries());
    self.selectedCountries = ko.observableArray([]);

    // added this bit
    self.selectedCountries.subscribe(function (newValue) {
        $('#foo').select2("val", newValue);
    });
}

更好的选择是制作一个自定义的剔除绑定，它可以让 Select2 随模型的更改而更新。

类似这样的：

HTML：

<select class="multi-select" data-bind="foreach: availableCountries, selectedOptions:selectedCountries, select2: selectedCountries" multiple="multiple">

JavaScript：

ko.bindingHandlers.select2 = {
    update: function (element, valueAccessor) {
        $(element).select2("val", ko.unwrap(valueAccessor()) || "");
    }
};

希望对你有所帮助。