solefald solefald - 3 months ago 19x
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

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

binding does not propagate to CSS
attribute, so I can not use
display: none;
on page load, or
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?


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 }"