CODEWITHSUNDEEP
knockout.jsjquery-templates
Mark Robinson
Mark Robinson

Reputation: 13278

Show progress bar while knockout is rendering the view

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??

Upvotes: 6

Views: 5300

Answers (2)

Henry Rodriguez
Henry Rodriguez

Reputation: 815

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

Upvotes: 3

RP Niemeyer
RP Niemeyer

Reputation: 114792

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/

Upvotes: 10

Related Questions