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>