Routing in Ember.js Dan McClain 

Routing? Wat? • With a web application, URLs are the main user interface • Ember.js uses URLs to manage states (where am I? What do I want to do? • Sharing a URL shares the current state (sort of) • Preserves the back button (unless you disable it) http://jsbin.com/ewumic/1/edit 

Defining Routes 

Router Types • By default, uses hash urls: #/articles/1 • You can use the History API (if the user’s browser supports it): /articles/1 • You can disable the browser’s URL entirely by using ‘none’ http://jsbin.com/ewumic/1/edit 

this.route(‘about’) Route AboutRoute Controller AboutController Template about Generated Objects 

this.route() • Used for singular pages • Can take a path http://jsbin.com/amicax/1/edit 

this.resource(‘articles’) Route ArticlesRoute Controller ArticlesController Template articles 

this.resource(‘articles’,function(){ this.route(‘new’) }); • Passing function to resource creates an articles.index route • Routes defined by this call • articles/index • articles/new • Renders the articles template first, with the nested route within its outlet 

this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesIndexRoute Controller ArticlesIndexController Template articles/index /articles/index 

this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesNewRoute Controller ArticlesNewController Template articles/new /articles/new http://jsbin.com/ovirep/12/edit 

this.resource() • Resources manage multiple routes • Can have dynamic segments • Can have nested routes and resources http://jsbin.com/ovirep/12/edit 

Route Hooks • model • setupController • activate • deactivate • renderTemplate 

Specifying Models • Ember will call the model function of the current route • Dynamic segments will be passed in on an object provided to the function http://jsbin.com/ovirep/13/edit 

Setting up controllers • Called when the route changes • Set properties on the controller, fetch additional resources http://jsbin.com/ecocen/1/edit 

Activate & Deactivate • Activate is called when you enter a route for the first time, not when the model changes • Deactivate is called when you completely exit a route 

Rendering Templates • Router’s main job is to render the correct template • Defining a renderTemplate function to change the template used or to render it in a different outlet http://jsbin.com/itofom/3/edit 

Questions? • More information - http://emberjs.com/guides/routing/ • http://danmcclain.net • http://github.com/danmcclain • @_danmcclain