Show progress bar while knockout displays view

Question

I have a complex page that uses knockout to render content through templates. It takes about 10 seconds to render, so I want to show a progress bar while this happens. I tried adding a callback to the template to the afterRender method, which broke the page - I think this method is more related to using the html generated by the template.

I also tried to create a binding handler that updates the progress bar on every call:

  ko.bindingHandlers.updateProgressBar = { init: function (element, valueAccessor) { viewModel.updateProgressBar(); } }; 

...

 <ul data-bind="template: {name: 'genericItemTemplate', foreach: ChildItems}, updateProgressBar: true"></ul> 

Unfortunately, although the method is actually called every time, the user interface is not updated until the templates are fully processed, so I will not get the expected progress that I am looking for.

I am using the tmpl template library.

How can I display a UI update with template progress, making my way through a large set of elements in an observable array?

Answer 1

One option is to put the source data in a separate array to start with it, and then use it as a queue. You can combine the number of x elements from the temp array and push them to your real observable array in setTimeout.

Then you can use dependectedObservable to track percentages.

Here is an example: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

I just breed this fiddle and add some style to create a fully functional progress bar, check it out: http://jsfiddle.net/Pegazux/h3UuG/