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

Posted 2023-05-07

【中文标题】Knoucktout.js 可见绑定中的 Select2 只显示不隐藏

【英文标题】：Select2 in Knoucktout.js visible binding only shows but does not hide

【发布时间】：2014-09-09 06:09:25

【问题描述】：

我将 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);

            
        
    

;

【问题讨论】：

您的select2 绑定处理程序是什么样的？

我在帖子中添加了绑定处理程序代码

【参考方案1】：

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

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

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

【讨论】：

ok 看起来比使用虚拟 div 标签更好。我试试看