使用knockout.js的可见性样式绑定失败

Question

data-bind="style : { display : repeat() === 'Custom' ? 'block' : 'none' }"

这种样式绑定成功使用knockout,因为以下失败

data-bind="style : { visibility : repeat() === 'Custom' ? 'visible' : 'hidden' }"

为什么？

我可以使用可见的绑定,但在我的情况下,即使它被隐藏,我也不想丢失div空间.

我怎样才能做到这一点？

我不想使用jquery来实现这一点,因为我已经成功使用它.

Answer 1

解决此问题的另一个选择是创建自己的绑定.这听起来很难,但它真的很容易,KO的设计考虑了自定义绑定.我希望基础包有更多,但它们创建起来微不足道.此解决方案的优点是您的绑定简单易读.这是一个名为hidden的示例:

ko.bindingHandlers.hidden = (function() {
    function setVisibility(element, valueAccessor) {
        var hidden = ko.unwrap(valueAccessor());
        $(element).css('visibility', hidden ? 'hidden' : 'visible');
    }
    return { init: setVisibility, update: setVisibility };
})();

并在您的HTML中用作:

data-bind="hidden: !repeat()"

Answer 2

我做了一些非常相似的事情,这对我有用:

data-bind="style : { visibility : repeat() === 'Custom' ? '' : 'hidden' }"

所不同的是设置visibility到'',而不是visible.