javascript - 使用 knockout.js 的可见性样式绑定(bind)失败

Question

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

此样式绑定(bind)使用 knockout 成功，但以下失败

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

为什么？

我可以使用可见绑定(bind)，但在我的情况下，我不想丢失该 div 空间，即使它是隐藏的。

我怎样才能做到这一点？

我不想使用 jquery 来实现这一点，因为我已经成功地使用了它。

Answer 1

解决此问题的另一种方法是创建您自己的绑定(bind)。这听起来很难，但它真的很容易，而且 KO 在设计时就考虑到了自定义绑定(bind)。我希望基础包有更多，但创建起来很简单。此解决方案的优点是您的绑定(bind)简单易读。这是一个名为隐藏的示例:

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()"