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

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.