Internal view lifecycle hooks for animation purposes

Proposals
4

Great article, and I agree. I believe we can use the same semantics from the new async transitions. Transitions (both animated or not) starts when all route model hooks (beforeModel, model and afterModel) has been resolved. If you want your transition to start before data for the target route has been loaded you should not return promises in your model hooks. This is the same behavior as when not using animation.

So you can achieve both. Here are two simple examples:

App.TransitionImmediatelyRoute = Ember.Route.extend({
  model: function() {
    var items = Em.A();
    items.set('isLoaded', false);
    $.getJSON('/api/items').then(function(payload) {
      items.pushObjects(payload);
      items.set('isLoaded', true);
    });
    return items; //Returns right away, so transition will occur right away
  }
});

App.TransitionAfterDataLoadedRoute = Ember.Route.extend({
  model: function() {
    //Returns a thenable, which will make the transition wait for the AJAX request to complete
    return $.getJSON('/api/items');
  }
});

(Could be prettier if using a data framework, but for simplicity I omitted that)

Edit: The isLoaded property is there so your template can display a “Loading…” message fx.