如何检测所有Backbone ajax请求何时完成？

Question

I can use jQuery to look at when each completes, but I need the start and the end of all backbone ajax requests.

This is so I can put up and indicator to the the user know that the app is working.

I could push and pop each request on to an array, but was wondering if there was an easier way?

  Backbone.ajax = function() {
    $A.report('BB - ajax called');
    var xhr = Backbone.$.ajax.apply(Backbone.$, arguments); 
    xhr.always(function(){
        $A.report('BB - ajax completed');
    });
    return xhr;
  };

Here is one solution:

  // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
  // Override this if you'd like to use a different library.
  var requestArray = [];
  Backbone.ajax = function() {
    var xhr = Backbone.$.ajax.apply(Backbone.$, arguments); 
    requestArray.push('mark');
    $A.report('BB - Ajax Started');
    xhr.always(function(){
        requestArray.pop();
        $A.report('BB - Ajax Completed');
        if(requestArray.length === 0){
            $A.report('BB - All Ajax Completed');
        }
    });
    return xhr;
  };

Answer 1

I use a simple pattern that relies on Backbones built in events. I mainly use this for my Views to show/hide a loading icon. In the example below i send out 2 requests. On each requests success, I increment a counter. If that counter reaches 2, i perform my desired action, which is usually hiding the loading icon and rendering the view.

var exampleView = Backbone.View.extend({
    waitToLoad:0,
    initialize:function(){
        var collection1 = new ExampleCollection();
        var collection2 = new ExampleCollection();
        this.listenTo(collection1,'sync',this.dataReady);
        this.listenTo(collection2,'sync',this.dataReady);
        collection1.fetch();
        collection2.fetch();
    },
    dataReady:function(){
        this.waitToLoad++;
        if(this.waitToLoad == 2){
            //all requests done
            this.render();
            this.waitToLoad = 0;
        }

    },
    render:function(){

    }
})