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

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).

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.

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.

Here's a CSS-only method if you're worried about unstyled widgets showing up before the bind for MVVM implementations.

[data-role]:not([role], [tabindex]) {
    visibility: hidden;
}

I haven't tested it on all Kendo widgets, but it seems to work for most.

Here is alternative approach using classes for "hide and "show" instead of an inline style. Add a "hide" class to the element that needs to be hidden until the contents load, and add a "css" data-binding to make it be shown when it is bound.

<div class="hide" data-bind="css: {'show': true}">

</div>

The 'hide' and 'show' classes are already defined in Bootstrap.

If Bootstrap is not being used, the CSS can be defined as:

.hide {
  display: none !important;
}
.show {
  display: block !important;
} 

The order matters. The "hide" class should be defined before "show".