Knoucktout.js 可见绑定中的 Select2 只显示不隐藏

Question

我将 select 2 与 knockout.js 一起使用

我想显示和隐藏一个项目是否被选中的控件。为此，我将可见属性绑定到模型上的 isSelected 可观察属性。

最初选择 2 是不可见的。当项目变为isSelected = true 时，框会显示并且是可见。到目前为止一切正常。

但是当isSelected变为false时，我仍然可以看到控件。它不会消失。相同属性上的其他控件确实可以正常工作并正确隐藏和显示，因此我确定该属性设置正确。

这是我的绑定

<select class="input-xlarge" 
        data-bind="visible: isSelected(), options: stations(), 
                   optionsValue: 'Id', optionsText: 'Name',
                   value:StationdId(), selectedOptions:selectedStations, 
                   select2: { formatResult: $root.formatStationDropDown,
                              minimumInputLength: 3, quietMillis: 200, 
                              maximumSelectionSize: 1, allowClear:true }">
</select>

我认为这与 select2 正在创建的包装元素有关？

作为一种解决方法，我可以添加一个包装元素并隐藏它，但对我来说这味道...

<div data-bind="visible: isSelected()">
   <select ....>
</div>

对如何正确执行此操作有任何建议吗？

还有我的绑定处理程序：

ko.bindingHandlers.select2 = {
    init: function (el, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
            $(el).select2('destroy');
        });

        var allBindings = allBindingsAccessor(),
            select2 = ko.utils.unwrapObservable(allBindings.select2);
        $(el).select2(select2);
    },
    update: function (el, valueAccessor, allBindingsAccessor, viewModel) {

        if (typeof el !== 'undefined') {

            var allBindings = allBindingsAccessor();

            if (allBindings.options.length > 0) {
                select2 = ko.utils.unwrapObservable(allBindings.select2);

                $(el).select2(select2);

                var value = allBindings.value;
                $(el).select2("val", value);

            }
        }
    }

};

Answer 1

您说得对，visible 绑定没有应用于生成的 select2 包装器，而是应用于原始的 <select> 元素（在生成 select2 后以 size=0 呈现）。

您可以使用无容器if 绑定：

<!-- ko if: isSelected -->
   <select ....>
<!-- /ko -->