我在淘汰赛中使用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/
答案 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' }"