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 t

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.