javascript - 使 knockout "visible"使用 CSS "visibility"属性

Question

根据 the "visible" binding documentation , 如果 visible 的值为 false，Knockout 使用 display: none 隐藏元素。我怎样才能让它使用 visibility: hidden 呢？ visibility: hidden 的优势(在本例中)仍然使元素占用页面空间。

Answer 1

你应该使用纯 css 样式或类，查看官方 knockout.js css binding或 knockout.js style binding文档。

样式绑定(bind)示例:

<div data-bind="style: { visibility: isVisible()  ? 'visible' : 'hidden' }">
    Profit Information
</div>

<script type="text/javascript">
    var viewModel = {
        isVisible: ko.observable(true) // visible
    };
    viewModel.isVisible(false); // hidden
</script>