Knockout可见绑定样式显示内联无法正常工作

时间:2014-02-20 16:16:56

标签: html css knockout.js

我在淘汰赛中使用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/

2 个答案:

答案 0 :(得分:12)

visible绑定会在"""none"之间提升元素的可见性,因此您需要创建支持inline显示的自定义绑定:

基于可见的source code(您可以进一步扩展此传递的desiered显示值作为参数):

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

答案 1 :(得分:6)

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