CODEWITHSUNDEEP
knockout.js
user1294594
user1294594

Reputation:

knockoutjs template displays before viewModel loads/binds

I am using Knockoutjs templates. The page is loaded with the template html showing for a brief second and then after the viewModel is loaded and binded, it displays correctly. What is the best way to deal with this? Currently I am wrapping the template in a div that is set to display: none and then removing this after the bindings have been applied.

Upvotes: 2

Views: 1267

Answers (2)

Mark Robinson
Mark Robinson

Reputation: 13278

Wrapping your markup in a script tag:

<script type="text/html" id="viewModelTemplate">
... your markup ...
</script>

and then having a single top level element of:

<div data-bind="template: {name: 'viewModelTemplate'}"/>

could help.

Upvotes: 3

Jason Goemaat
Jason Goemaat

Reputation: 29194

When are you binding your view model? Are you doing it from an AJAX request or an event? If the data is there, a script tag at the bottom of your page should run and do the bindings before any HTML is displayed. If you need the binding to run after the HTML is displayed, you need to use your method. If you are using AJAX, I'd structure the view model such that you bind to your empty view model and have a property like isLoaded that you set when the loading is complete, then you can bind to it:

<div data-bind="visible: isLoaded">...</div>

Upvotes: 0

Related Questions