CODEWITHSUNDEEP
ember.jspromiseloading
blueFast
blueFast

Reputation: 44381

How to handle end of loading event?

I have the following test application, implementing the loading event:

App = Ember.Application.create();

function delayedPromise(delay, value) {
    delay = delay || 3000;
    value = value || { msg: 'Delayed promise has been fulfilled' };
    var promise = new Ember.RSVP.Promise(function(resolve) {
        Ember.run.later(function() {
            console.info('Delayed promise has been fulfilled');
            resolve(value);
        }, delay);
    });
    return promise;
}

App.ApplicationRoute = Ember.Route.extend({
  beforeModel: function() {
    return delayedPromise();
  },

  actions: {

    loading : function() {
      $.blockUI();
    },

  }
});

Which is working as expected: the UI is blocked by the loading event.

How can I unblock the UI ($.unblockUI())? Is there a loadingFinished (or similar) action that I can implement whenever all models have finished resolving?

Working jsbin here.

Upvotes: 2

Views: 425

Answers (1)

Asgaroth
Asgaroth

Reputation: 4334

Following the example of Legacy Loading Route you could:

App.ApplicationRoute = Ember.Route.extend({
  beforeModel: function() {
    return delayedPromise();
  },

  actions: {

    loading : function() {
      $.blockUI();
      this.router.one('didTransition', $, 'unblockUI');
    },

  }
});

Upvotes: 2

Related Questions