Show progress bar while knockout is rendering the view

Question

I have a complex page that uses knockout to render the contents via templates. It takes around 10 seconds to render so I want to show a progress bar while this happens. I have tried to add a callback in the template to the afterRender method which broke the page - I think this method is more to do with fiddling with the html generated by the template.

I have also tried creating 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 does get called each time, the UI does not get updated until the templates have completely finished rendering so I don't get the running progress that I am looking for.

I am using tmpl template library.

How can I display update the UI with progress of the template working its way through a large collection of items in an observableArray??

Answer 1

One choice is to place your initial data into a separate array to start with and then use it as a queue. You would splice "x" number of items from the temp array and push them to your real observableArray in a setTimeout.

You can then use a dependentObservable to track the percent complete.

Here is a sample: http://jsfiddle.net/rniemeyer/fdSUU/

Answer 2

I've just fork that fiddle and add some style to make a fully functional progress bar, check it: http://jsfiddle.net/Pegazux/h3UuG/