title: KnockoutJS - Using custom bindings to add animation
body: <p>I'd like to make use of custom bindings to display a progress icon (spinner or bar) whilst a price is being updated via an ajax call.</p>
  
  <p>Before I started using Knockout I just called onUpdating() at the start of my ajax method and then onUpdated(price) when the ajax successfully returned a price.</p>
  
  <pre><code>function onUpdating() {
      $(".price").empty().html('&lt;img src="/Content/Img/Site/progress.gif" /&gt;');
  }
  
  function onUpdated(price) {
      $(".price").empty().html('£' + price);
  }
  </code></pre>
  
  <p>As I'm now using Knockout I'd like to use the custom bindings but I just cant get my head around how it works.</p>
  
  <p>I guess something like this:</p>
  
  <pre><code>    ko.bindingHandlers.showProgress = {
          init: function (element, valueAccessor) {
              $(element).empty().html('&lt;img src="/Content/Img/Site/progress.gif" /&gt;');
          },
          update: function (element, valueAccessor) {
              $(element).empty().html('£' + valueAccessor());
          }
      }
  
  &lt;p&gt;
      Price: &lt;span data-bind="showProgress: price"&gt;&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>However, this doesn't work at all. Any help greatly appreciated.</p>
  
  <p><strong>EDIT</strong>
  The following seems to be getting there but its not showing the progress bar whilst updating:</p>
  
  <pre><code>    ko.bindingHandlers.showProgress = {
          update: function (element, valueAccessor) {
              $(element).empty().html('&lt;img src="/Content/Img/Site/progress.gif" /&gt;');
              var value = ko.utils.unwrapObservable(valueAccessor());
              $(element).empty().html('£' + value);
          }
      }
  </code></pre>