Async Routing in Ember.js [OUTDATED]

49612ba6e616ca3c4c668ad35e3e84ce?s=47 Luke Melia
September 19, 2012

Async Routing in Ember.js [OUTDATED]

NOTE: This presentation is not up-to-date with changed to Ember since September 2012.

A short talk on how to use promises with the Ember Router.


Luke Melia

September 19, 2012


  1. 5.


  2. 8.

    ▪ If deserialize returns a promise, the Router will enter

    a loading state and until the promise resolves. ▪ Promises are detected based on presence of then method. 8 Solution: The Ember Router Understands Promises
  3. 9.

    ▪ “A promise represents the eventual value returned from the

    single completion of an operation.” ▪ 9 What are promises?
  4. 10.

    ▪ Has a function “then”: ▪ then(fulfilledHandler, errorHandler) ▪ Adds

    a fulfilledHandler and errorHandler to be called for completion of a promise. The fulfilledHandler is called when the promise is fulfilled. The errorHandler is called when a promise fails. 10 What are promises?
  5. 12.

    Loading Indicator ▪ The loading state can connect an outlet

    or update controllers on enter and exit to present a loading indicator. 12
  6. 13.

    Loading States ▪ Note that you need a loading state

    on every parent of a route that will return a promise from deserialize. 13
  7. 14.

    Future Plans ▪ ember-data will eventually provide promises automatically (without

    using jQuery) ▪ For a jQuery-based mixin that you can use for now, see 45b100e8dc9bcb3069be 14
  8. 15.

    Other Uses ▪ Promises can wait on anything ▪ For

    example: CSS or Javascript modules to be loaded 15
  9. 16.

    Warning: Router API is in flux ▪ A fresh API

    is currently being added to the Ember router in master ▪ Heavier emphasis on rendering templates ▪ Async behavior will likely remain consistent 16
  10. 17.

    Q & A Follow me @lukemelia Some examples appear courtesy

    of my company, Yapp (which is hiring now or soon). Creative Commons photo credits: 17