How to prevent showing html before knockout binding

Question

I use the following knockout scripts in my Html:

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

The problem is that before bindings this line will be displayed for a second or two.

How can I prevent this?

Answer 1

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

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

Once it is handed down before the knockout does its job, it will be initially hidden. When the bindings are applied, the knockout redefines the style and makes it visible.

---

Alternatively, you can drop your view into a script block and create it through a template. Script blocks will not be displayed, but will be visible when a knockout displays a template.

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

Answer 2

Since the behavior you want often changes from page to page, this is what I do in my layout / template file (ASP.NET).

  <div class="ko-unbound" data-bind="css: { 'ko-unbound': false, 'ko-bound': true }"> @RenderBody() </div> 

When the page is linked:

• ko-unbound class is removed from the page (the class attribute is initially added). Class added to page
• ko-bound .

Then on the page where inappropriate content is the problem, I can configure css to show or hide objects based on these two classes. I also use this technique to show a loading image, or possibly impose a minimum height for an element.

 .ko-unbound #storeWizard { display: none; // hide entire section when the page is binding } .ko-bound #loadingGraphic { display: none; // hide loading graphic after page is bound } 

During testing, when applying the bindings, I add a timeout so that I can see the flash.

  setTimeout(function () { ko.applyBindings(RR.VM); }, 300); 

Answer 3

Wrap your html in something like this -

 <div id="hideme" style="display:none"> </div> 

Then in your JavaScript, add the following jquery line after the binding is binding -

 $('#hideme').show(); 

This is the easiest method I've found that works. You can do this with some knockout bindings, but you are losing your guaranteed time because you cannot control the order bindings.

Answer 4

Another solution I found here

 <div id="binding-start" style="visibility:hidden" data-bind="attr: { 'style': 'visibility:visible' }" /> 

This has an advantage - or a disadvantage, depending on your needs - this space will be reserved for hidden content. The page will not "jump" when applying bindings.