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。

Answer 3

使用css绑定http://knockoutjs.com/documentation/css-binding.html可能会更好。您还可以使用computed可观察对象来整理整个事物。

self.hidden = ko.computed(function() {
    return self.repeat() !== 'Custom';
})

您的绑定现在很简单data-bind="css: { hide: hidden }"

在CSS中提供以下类：

.hide {
    visibility: 'hidden';
}

Answer 4

这对我来说很有效，使div仅在使用visibility加载页面后可见：

<div style="visibility:hidden" data-bind="style: {visibility: 'visible'}">
    ...
</div>

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

4 个答案: