Routing in Ember.js

This presentation goes over the basics of the Ember.js Router

Transcript

1. Routing in Ember.js Dan McClain
2. 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
3. Defining Routes
4. 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
5. this.route(‘about’) Route AboutRoute Controller AboutController Template about Generated Objects
6. this.route() • Used for singular pages • Can take a path http://jsbin.com/amicax/1/edit
7. this.resource(‘articles’) Route ArticlesRoute Controller ArticlesController Template articles
8. 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
9. this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesIndexRoute Controller ArticlesIndexController Template articles/index /articles/index
10. this.resource(‘articles’,function(){ this.route(‘new’) }); Route ArticlesNewRoute Controller ArticlesNewController Template articles/new /articles/new http://jsbin.com/ovirep/12/edit
11. this.resource() • Resources manage multiple routes • Can have dynamic segments • Can have nested routes and resources http://jsbin.com/ovirep/12/edit
12. Route Hooks • model • setupController • activate • deactivate • renderTemplate
13. 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
14. Setting up controllers • Called when the route changes • Set properties on the controller, fetch additional resources http://jsbin.com/ecocen/1/edit
15. 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
16. 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
17. Questions? • More information - http://emberjs.com/guides/routing/ • http://danmcclain.net • http://github.com/danmcclain • @_danmcclain