CODEWITHSUNDEEP
javascripthtmlcssknockout.js
tallpaul
tallpaul

Reputation: 1513

How to use Knockout Visible binding correctly?

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).

Upvotes: 0

Views: 556

Answers (1)

Michael Best
Michael Best

Reputation: 16688

The Knockout documentation is slightly wrong. It should state that the visible binding will revert to the display setting of the CSS rules, rather than just "CSS". So it would become:

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

Upvotes: 1

Related Questions