How to apply bindings for template in a separate 'thread' or asynchronously?

Question

Don't know whether it's possible as I could not find anything online. I have a KO template and I have about 100 records.

In IE 8 (due to its sub-optimal JS engine), the page is taking about 15 seconds to load. In Firefox, it takes about 6 seconds.

I have confirmed that in IE about 5 seconds are lost to ko.applyBindings.

Is there a way to apply the bindings asynchronously? Perhaps having a loading icon, so that users can continue using the page while KO is processing the template.

Answer 1

I had a similar problem. setTimeout is what you need to be using here. In my application I:

1. Initalize an empty (or fairly empty) viewModel
2. Apply bindings (which shows a 'Please wait...' message due to a dependent property on the model that indicates if all the data has loaded).
3. Add chunks of data into the viewModel (I presume you have an observable array that holds most of your data so you would just push say 10 items at a time into the observable array)

This is the answer that got me going with a jsFiddle showing how to use setTimeout in the bindings:

Show progress bar while knockout is rendering the view