How can I hide the default page elements but show them later using Knockout?
I am developing a single page web application using Knockout and jQuery. The body of the page is split into different <section>
s, each corresponding to a specific page; the user will only see one section at a time. We are using the Knockout binding visible
to hide and show the sections as needed and it works great.
The problem is that on page load - when the HTML is loaded but the knockout hasn't applied its anchors yet - all sections are visible. It takes less than a second, but it is unsightly. I've tried setting display: none
the sections so that they are invisible initially, but there is a quirk with knockout visible
binding : if the expression evaluates to true, the knockout sets the CSS property display
as if it were not knocked out.
In other words, the installation data-bind="visible: true"
will not override display: none
. This makes sense as there are often situations where you need to specify a display as invisible, or say table-cell
, but this is annoying in my case. What's the best way to get Knockout to show my section items?
It turns out that while knockout won't override the set display: none
in CSS like
body > section {
display: none;
}
it will override the same style directive if it appears in the HTML itself:
<section style="display: none" data-bind="...">
So the solution to my problem was to move display: none
from CSS file to property style
. The knockout will then override the property to display mine <section>
when I wanted it to display.