Question

我正在尝试使用knockoutJS实现使用optgroup进行多项选择的数据绑定。此外，我们希望使用select2作为其搜索和显示功能。

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

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

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

希望这有一些帮助。

使用带有多个select optgroup和knockoutJS的select2.js

1 个答案: