How do I observe a specific AJAX call by URL in JavaScript / Ember.js?

I am trying to create a loading button component in my Ember.js application. The button should automatically get disabled when it detects that a specific XHR is made and re-enable itself when the XHR is complete. Basically, I want it to track a specific URL that I submit and change state based on that. This is what my Handlebars file currently looks like with the component:

I tried accomplishing this using jQuery's .ajaxComplete() method in my Ember application controller but I can't get the `' component to observe any property in the application controller.

init: function() {
    let self = this;
    // Observe all XHRs
    $(document).ajaxComplete(function(event, xhr, settings) {
        self.set('ajaxCompleteUrl', settings.url);
    });
}

Appreciate any pointers on how I can achieve this. Thanks.