show progressbar while data is loading Knockoutjs

Question

I need some help in integrating a loading progress bar of JqueryUI to loading of data from a Observable array of KO. I have created some JsFiddles

fiddle for KnockOut : http://jsfiddle.net/neodescorpio/HksCA/

fiddle for JqueryUI Progress bar : http://jsfiddle.net/neodescorpio/NAs3V/

I need to combine both of these so that on loading of knock out a progress bar with percentage is shown and disappears after data is loaded 100%. If any other progressbar is used im okay with it. i just want a progress to be shown.

Answer 1

You should make a custom binding to manipulate the jQuery progress bar from knockout bindings. For example something like that (very contrived example):

ko.bindingHandlers.progress = {
   init: function(element, valueAccessor) {
      $(element).progressbar({
         value: 0
      });
   },
   update: function(element, valueAccessor) {
      var val = ko.utils.unwrapObservable(valueAccessor());
      $(element).progressbar("value", parseFloat(val));
   }
};

Now you can create a progress bar from a div and command it through an observable value (which should return a number, or a string representing a number, ranging from 1 to 100), by using the progress binding - e.g.:

<div data-bind="progress: percentComplete"></div>

I update your fiddle to show an example: http://jsfiddle.net/HksCA/2/