javascript - Knoucktout.js中select2可见绑定(bind)只显示不隐藏

Question

我使用带有 knockout.js 的 select 2

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

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

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

这是我的绑定(bind)

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

有没有关于如何正确执行此操作的建议？

还有我的绑定(bind)处理程序:

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 你是对的绑定(bind)未应用于生成的 select2包装器，但原始 <select>元素(在生成 select2 后以 size=0 呈现)。

您可以使用无容器 if绑定(bind):

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