Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Async Routing in Ember.js Luke Melia Ember.js NYC Meetup September

    18th, 2012
  2. About this Embereño 2

  3. ▪ /yapps/:yapp_id ▪ /pages/:page_id ▪ Loading a Yapp will sideload

    its pages 3 Simple routing example
  4. 4 Simple routing example

  5. 5

  6. 6 Working example: http://jsfiddle.net/XdFvr/6/show/#/yapps/42/pages/7 Synchronous Load (No problem)

  7. 7 Working example: http://jsfiddle.net/XdFvr/5/show/#/yapps/42/pages/7 Asynchronous Load (Uh oh)

  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
  9. ▪ “A promise represents the eventual value returned from the

    single completion of an operation.” ▪ http://wiki.commonjs.org/wiki/Promises/A 9 What are promises?
  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?
  11. 11 Working example: http://jsfiddle.net/XdFvr/4/show/#/yapps/42/pages/7 Async Load with Promises (No Problem)

  12. Loading Indicator ▪ The loading state can connect an outlet

    or update controllers on enter and exit to present a loading indicator. 12
  13. Loading States ▪ Note that you need a loading state

    on every parent of a route that will return a promise from deserialize. 13
  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 https://gist.github.com/ 45b100e8dc9bcb3069be 14
  15. Other Uses ▪ Promises can wait on anything ▪ For

    example: CSS or Javascript modules to be loaded 15
  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
  17. Q & A Follow me @lukemelia Some examples appear courtesy

    of my company, Yapp (which is hiring now or soon). Creative Commons photo credits: flickr.com/photos/javic/3611069497 17