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

Question

我正在尝试使用 knockoutJS 通过 optgroup 实现多项选择的数据绑定(bind)。此外，我们希望使用 select2 来实现其搜索和显示功能。

Here is the fiddle sample.

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

单击后一个按钮后，您可以通过单击第一个按钮检查可观察的selectedCountries 是否包含预期值。不幸的是，UI 控件没有刷新，您知道该怎么做吗？我的 View 的 html 数据绑定(bind)看起来像

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

然后我添加了对可观察对象的订阅:

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);
    });
}

更好的选择是制作一个自定义的 knockout 绑定(bind)，它可以让 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()) || "");
    }
};

希望对您有所帮助。