[SOLVED] How to prevent Html showing before knockout binding is executed

How to prevent Html showing before knockout binding is executed

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?

Solution

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>