Loading Routes in nested route Hierachy

Question

I am working on a mobile application with Ember. I want to make the user experience as good as possible and try to take into account that on mobile the connection is not always as good, that is why I want to utilize the loading routes with a loading spinner. Unfortunately in one case it is not behaving as I would expect:

In my Nested route Setup:

UserRoute:
   UserIndexRoute (=Profile)
   UserFriendsRoute

On the UserRoute I only load a small version (=different model) of the user. In 95% of the cases this model is already loaded when I want to navigate there. And in the Subroutes (e.g. UserIndexRoute and UserFriendsRoute I only need the full user.

What I want to achieve is that the UserRoute with its template is directly rendered when navigating to e.g. UserIndexRoute and then in the outlet for the Index part I want the UserLoadingView to be rendered. But the rendering always waits for all promises to be resolved and the UserLoadingView is never shown.

How can I force Ember to render the UserRoute and then the UserLoadingView in the outlet until the UserIndexRoute Model is resolved?

How I implemented it:

afterModel: function(model, transition){
    var _this = this,
        params = Ember.get(transition, 'params.user');
    this.get('store').find('user', params.user_id).then(function(user){
        _this.transitionTo('user.profile', user);
    });
}

Kingpin2k Kingpin2k · Accepted Answer · 2014-08-05T17:15:36

Don't use the index route for fetching the full model, just use it as a means for redirection.

Do something like this:

UserRoute:
   UserIndexRoute
   UserFooIndexRoute (=Profile) (Naming is up to you)
   UserFriendsRoute

Then hook up your index route to fetch the full model and transition to FooIndex when it's completed getting the model, this depends on it being a route with a dynamic segment (:id).

App.UserIndexRoute = Em.Route.extend({
  redirect: function(){
    var self = this;
    fetchTheFullModel.then(function(model){
      self.transitionTo('user.fooIndex', model); 
    }
  }
});

If it isn't like that you can do just transition to the other route after the transition and page has finished rendering.

App.UserIndexRoute = Em.Route.extend({
  redirect: function(model, transition) {
    var self = this;
    transition.then(function(){
      Ember.run.scheduleOnce('afterRender', function(){
        self.transitionTo('user.fooIndex');
      });  
    });
  }
});

http://emberjs.jsbin.com/zohav/1/edit

You can read more about the transition promise, and afterRender here Ember transition & rendering complete event

Loading Routes in nested route Hierachy

1 Answers