How to prevent Html showing before knockout binding is executed

Question

I am using the following knockout scripts in my Html:

<!-- kno ifnot: bla -->   <tr><td>some stuff</td></tr>  <!-- /ko --> 

The problem I have is that before the bindings are executed this row will show for a second or two.

How can I prevent this from happening?

Answer 1

Here's a simple trick. Just make your root element initially hidden and set the visible binding to true.

<div style="display: none;" data-bind="visible: true">     <!-- the rest of your stuff --> </div> 

As it's rendered, before knockout does its thing, it will be initially hidden. When the bindings are applied, knockout will override the style and make it visible.

---

Alternatively, you can throw your view into a script block and instantiate it through a template. The script blocks will not be rendered but will be visible when knockout renders the template.

<!-- ko template: 'myView' --><!-- /ko --> <script id="myView" type="text/html">     <!-- the rest of your stuff --> </script>