What is the best way to hide the screen while knockout js bindings are being built?

Question

I'm a huge knockoutjs fan. I use it for all my web development now and simply love it. One thing that I've not been able to figure out though is how to hide the UI while the knockoutjs bindings are being built.

For example, I have a very robust user interface with lots of templates being used on my page. The problem that I'm noticing is that when the user first visits the page, they see all of my templates for a split second before the bindings kick in and hide them.

What is the best way to fix this problem? I've tried using helper classes to hide them, but then the templates are not able to be displayed using 'visible' and 'if' bindings unless I remove the helper class reference (ie. ui-helper-hidden).

Answer 1

I was just googleing for this, and after using the observable way, I thought of another approach:

<div style="display: none" data-bind="visible: true">   <ul data-bind="foreach: items">     <li data-bind="text: name"></li>   </ul> </div> 

You don't need an observable, the visible will always evaluate to true once the data binding is done.

Answer 2

There are a couple of strategies that you can use here.

-One is to place all of your actual content into templates that live in script tags (does work fine with native templates). Within the template, you can then use control-flow bindings. This would be like:

<div data-bind="template: 'contentTmpl'"></div>  <script id="contentTmpl" type="text/html">    <ul data-bind="foreach: items">        <li data-bind="text: name"></li>    </ul> </script> 

-Another choice is to use style="display: none" on the container element along with a visible binding that can be tied to a loaded observable where you change the observable to true after the bindings have been applied.