Question

我使用select 2和knockout.js

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

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

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

这是我的约束

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

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

1 个答案: