solefald solefald - 4 months ago 23
jQuery Question

Knockout JS: Stop divs binded to visible: from flashing on screen

I am working on a single page applications that has a bunch of hidden divs, binded (or is it bound?) to KnockoutJS with

visible:
. When page loads, they all momentarily flash on screen. I have tried moving my JS into the
<head></head>
, but that had no effect, so loading JS at the bottom of the page is not what's causing it.

Unfortunately,
visible:
binding does not propagate to CSS
display
attribute, so I can not use
display: none;
on page load, or
visible:
will not work at all. Unless... I load the page with
display: none;
and then change it the very first time I show the div to a user.

But is there a more elegant way to achieve this?

Answer

Wth KnockoutJS, I work around this problem by defining a CSS class called hidden with display:none, then I'll add this class and binding to the flashing container:

class="hidden" data-bind="css: { hidden: false }"