Delaying route change until data is loaded in Ember

Question

In Angular the $routeProvider resolve property allows delaying of route change until data is loaded. Given the route model hook in Ember returns a promise I was wondering how that stuff was done in Ember

Here it's what I mean in angular Delaying AngularJS route change until model loaded to prevent flicker

A link with a sample code would be great

Answer 1

Just recently this PR introduced Async transitions to ember.js. With this change you can do all sort of things, like for example delaying a route's transition if data is still underway. A route has now all sorts of hooks available to do just want you want.

As an example (taken from the gist mentioned below) in the afterModel hook you could do something like this to only transition to the post.show route if you actually have data:

App.PostsIndexRoute = Ember.Route.extend({
  afterModel: function(posts, transition) {
    if (posts.length === 1) {
      this.transitionTo('post.show', posts[0]);
    }
  }
});

Since this new features are still very young you need to use the latest master to have it available. For more info on how to use the API please see this gist.

Hope it helps