淘汰可见绑定样式显示内联不起作用

Posted 2023-03-27

【中文标题】淘汰可见绑定样式显示内联不起作用

【英文标题】：Knockout Visible Binding Style Display Inline not working

【发布时间】：2014-03-21 17:33:17

【问题描述】：

我在淘汰赛中使用visible 绑定。我想将h3 html 元素设置为display:inline。但是，在绑定发生后，内联 css display: inline 被清除并恢复。当我不使用 visible 绑定时，我没有问题。

<div style='display: inline'>
    <label style='display: inline'>Product Total</label>
</div>
<div style='display: inline'>
    <h3 style='display: inline' data-bind='visible: Total() > 3, text: Total'></h3>
</div>

输入大于 3 的值以重现该问题： http://jsfiddle.net/ryandxavier/ung4z/

【参考方案1】：

visible 绑定在"" 和"none" 之间切换元素的可见性，因此您需要创建一个支持inline 显示的自定义绑定：

基于可见的source code（您可以进一步扩展此传递所需的显示值作为参数）：

ko.bindingHandlers['visibleInline'] = 
    'update': function (element, valueAccessor) 
        var value = ko.utils.unwrapObservable(valueAccessor());
        var isCurrentlyVisible = !(element.style.display == "none");
        if (value && !isCurrentlyVisible)
            element.style.display = "inline";
        else if ((!value) && isCurrentlyVisible)
            element.style.display = "none";
    
;

并在你的 html 中使用：

<h3 style='display: inline' data-bind='visibleInline: Total() > 3, text: Total'></h3>

演示JSFiddle.

或者作为替代解决方案，您可以使用无容器语法，不要将绑定放在您的 h3 上，而是使用 if 而不是 visible：

<h3 style='display: inline'>
    <!-- ko if: Total() > 3 -->
        <!-- ko text: Total --><!-- /ko -->
    <!-- /ko -->
</h3>

演示JSFiddle.

【讨论】：

我从来没有想过去看看源代码。我将来肯定会这样做。谢谢！

【参考方案2】：

data-bind="style:  display: yesOrNo() ? 'inline' : 'none' "