title: Processing observable array of viewmodels with progressbar and knockout
body: <p>I was trying to figure out how to do such thing like automatically process observable array of some viewmodels on server and let it update jquery ui progressbar one by one, i came up with following code :)</p>
  
  <pre><code>&lt;div data-bind="progressBar: { value: progressValue, max: ViewModels().length }" style="width: 100%"&gt;
  &lt;/div&gt;
  
  ko.bindingHandlers.progressBar = {
          init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
              var value = valueAccessor();
              $(element).progressbar({
                      value: false,
                      max: ko.unwrap(value.max)
                  });
          },
          update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
              var value = valueAccessor();
              $(element).progressbar("option", "value", ko.unwrap(value.value));
          }
      }
  
  function ViewModel(model) {
          var self = this;
          ko.mapping.fromJS(JSON.parse(model), {}, self);
  
          self.progressValue = ko.observable(0);
          ko.computed(function () {
              if (self.ViewModels().length &gt; 0) {
                  var first = self.ViewModels()[0];
                  $.ajax({
                      //send first viewmodel on server and do something with it
                      success: function (result) {
                          self.ViewModels.remove(first);
                          self.progressValue(self.progressValue() + 1);
                      }
                  });
              }
          })
      }
  </code></pre>
  
  <p>What do you think about this approach when computed is called recursively? Maybe you dont see any real usage but if, how would you do that other way?</p>