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?
source to share
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.
source to share