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

Posted 2023-05-07

【中文标题】将 select2.js 与多个选择 optgroup 和 knockoutJS 一起使用

【英文标题】：Using select2.js with multiple select optgroup and knockoutJS

【发布时间】：2014-08-14 01:34:30

【问题描述】：

我正在尝试通过 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>

【参考方案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()) || "");
    
;

希望对你有所帮助。

【讨论】：

两种解决方案都有效。正如 Paul 所建议的，第二个更干净，因为它更遵循 MVVM 原则。对于那些可能感兴趣的人，您可以在这里查看。非常感谢！ jsfiddle.net/U4L77/5