如何清除 Select2 中的选定值

Question

我正在开发一个有选择元素的 Web 应用程序。我将它绑定到一个集合。我正在使用淘汰赛来做到这一点。

这是我的代码：

    <select multiple class="form-control input-sm"
                                    data-bind="options: ConfigurationParameters ,optionsValue: 'Bit63', optionsText: 'DisplayText', selectedOptions: SelectedConfigParams,select2: { placeholder: 'Choose...' }"></select>

这是我的绑定处理程序：

    ko.bindingHandlers.select2 = {
init: function (element, valueAccessor) {
    var options = ko.toJS(valueAccessor()) || {};
    setTimeout(function () {
        $(element).select2(options);
    }, 0);
  },
    update: function (element, valueAccessor, allBindings) {
    console.log("update called");
}
};

我还有其他所有具有类似功能的选择元素。当用户选择所需信息并单击提交时，我将数据保存到数据库中。完成此操作后，我需要清除选择框中的值。我编写了一个代码来删除“SelectedConfigParams”中的所有元素。但是这些值并没有从选择元素中删除。在图像中，您可以看到，在清除选定的选项后，选择元素仍然显示先前选择的值。 （SelectedConfigParams 是一个 ko.observableArray()）。

Answer 1

当您创建自定义绑定时，您需要指定两个不同的函数：

• init：在绑定完成时调用一次。您应该使用它来添加事件处理程序，并为元素设置默认属性，应用 jQuery 插件...
• update：在 init 之后以及任何使用的 observable 或计算的 observable 更改时调用。可通过valueAccessor 访问可观察对象，这允许您获取在bindingName: 之后指定的值或可观察对象，或通过任何其他参数（allBindings, viewModel, bindingContext）。您应该根据新的可观察值更新此函数中元素的状态、应用的插件等

那么，你需要做的是：

1. 创建init函数来初始化select2
2. 创建update函数来改变select2插件的状态
3. 在您的视图模型中创建一个可观察对象并使用您的自定义绑定将其绑定到您的元素（这将调用 init，并使用可观察对象的初始值进行更新）
4. 在您的视图模型中修改 observable。当您这样做时，您的 binder 的 update 函数将被调用，以便您的元素或插件的状态可以更新

请参阅Knockout's custom binding docs 了解更多信息。