How to use Knockout Visible binding correctly?

时间:2015-11-12 11:59:19

标签: javascript html css knockout.js

In the first part of this SO answer it says to apply the following code to prevent the HTML from being displayed while the Knockout bindings are applied:

<div style="display: none;" data-bind="visible: true">
    <!-- the rest of your stuff -->
</div>

The author states:

As it's rendered, before knockout does its thing, it will be initially hidden. When the bindings are applied, knockout will override the style and make it visible.

Is this correct? Would this div not be permanently hidden due to the true value allowing the CSS display: none to apply? How could you make it visible after the bindings are applied?

In the Knockout docs, it states:

When the parameter resolves to a true-like value (e.g., the boolean value true, or a non-null object or array), the binding removes the yourElement.style.display value, causing it to become visible.

Note that any display style you’ve configured using CSS will then apply (so CSS rules like display:table-row work fine in conjunction with this binding).

1 个答案:

答案 0 :(得分:1)

Knockout文档稍有不妥。它应该声明visible绑定将恢复为 CSS规则display设置,而不仅仅是“CSS”。所以它会变成:

  

请注意,您在CSS规则中配置的任何显示样式都将适用(因此像x { display:table-row }这样的CSS规则可以与此绑定一起使用。)