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

Question

我visible在淘汰赛中使用绑定.我想将h3html元素设置为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/

Answer 1

该visibletogles之间的元素的可见性结合""和"none",所以你需要创建一个自定义绑定其支持的inline显示器:

基于可见的源代码(您可以进一步扩展此传递的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.

Answer 2

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