Ember.js中哪些合适的钩子在路由中实现“加载”状态？

Question

While a Position model loads, I want to show a loading/spinner message in the template. I am not being able to achieve that.

{{#if loading}}
  <div class="spinner"></div>
{{else}}
  <div>Here goes the position</div>
{{/if}}

Given the router

App.Router.map(function() {
  this.resource('article', { path: '/:id' }, function() {
    this.route('position', { path: '*position_id' });
  });
});

my approach in the ArticlePositionRoute is the following:

App.ArticlePositionRoute = Em.Route.extend({

  actions: {
    loading: function() {
      var controller = this.get('controller');
      if (controller) controller.set('loading', true);
      return false;
    }
  },

  setupController: function(controller, model) {
    controller.set('loading', false); // BEFORE _super
    this._super(controller, model);
    controller.set('loading', false); // AFTER _super
  },

  model: function(params) {
    return promiseThatTakesAWhile(); // slow fetch model
  },

  afterModel: function(model) {
    var self = this;
    return promiseThatTakesAWhile().then(function(result) {
      model.set('result', result);
      self.set('controller.loading', false); // THIS THROWS "Uncaught Error: Property set failed: object in path "controller" could not be found or was destroyed."
    });
  }

});

In afterModel , the controller is not available, throws Uncaught Error: Property set failed: object in path "controller" could not be found or was destroyed.

In setupController , when the set goes before the _super call, it blows with Error: Assertion Failed: Cannot delegate set('loading', false) to the 'content' property of object proxy <App.ArticlePositionController:ember726>: its 'content' is undefined. , if I put it after the _super call, the view already calls didInsertElement and errs because it can't find the right div in the template (basically, it's too late).

What are the proper hooks to set/unset the 'loading' flag? I think I have the set loading true in the right place, but I don't know where to put set loading false .

When the Ember docs say actions: { loading: function(transition, originRoute) { // displayLoadingSpinner(); ... actions: { loading: function(transition, originRoute) { // displayLoadingSpinner(); ... , if that example in the docs was fully developed, what would it look like?

Answer 1

You should use the built in loading route. You may think it needs to exist as a child route of the resource that is taking time to load, but that's incorrect, it needs to be a child route of the parent's resource (which will have already resolved). Or in your case the loading route needs to exist as ArticleLoadingRoute . It will be shown any time any resource/route immediately under it is taking time to load.

Here's an example where I've forced two resources to take a while to load

http://emberjs.jsbin.com/OxIDiVU/465/edit