title: overriding backbone js sync method to add xhr event listener
body: <pre><code>sync: function(method,model,options){
  
          options.beforeSend = function(xhr,settings) {
  
              settings.xhr = function() {  
                  console.log('test');
  
              }
  
          }
  
  
          return Backbone.sync(method,model,options);
      }
  </code></pre>
  
  <p>I would like to implement a progress bar for my model fetch, and have added the code above to override the sync to access the xhr method. However, it doesn't seem to fire or do anything. I'm using jquery 2.0.3 and backbone 1.1.2</p>
  
  <p>EDIT:</p>
  
  <p>The problem I have now is that updateProgress only fire once at the end.</p>
  
  <pre><code>options.beforeSend = function(xhr,settings) {
  
              settings.xhr = function() {  
                  var xhr = $.ajaxSettings.xhr();
  
                  xhr.addEventListener("progress", updateProgress, false);
  
  
  
                  function updateProgress(event){
                      console.log('loaded:'+event.loaded+' total:'+event.total);
                      Math.ceil(event.loaded/event.total*100);
                  }
  
  
  
                  return xhr;
  
              };
  
  
           }
  </code></pre>