Ember.js routing

Question

I am struggling to find any good Ember.js routing examples.

Should I use an addon like this or I personally like the look of this ?

I see there is a routes collection as part of the State object but I cannot find any examples of how to use it.

Answer 1

Routing has been recently made available in core Ember.js, see Tom Dale's blog post .

Core developer Yehuda Katz wrote a gist about the usage of the new routing feature. It's a good read, and besides routing also states how it can be integrated with controllers.

To get the basic idea, here's a code example taken from the gist:

App.Router = Ember.Router.extend({
  root: Ember.State.extend({
    index: Ember.State.extend({
      route: '/',
      redirectsTo: 'calendar.index'
    }),

    calendar: Ember.State.extend({
      route: '/calendar',

      index: Ember.State.extend({
        route: '/'
      }),

      preferences: Ember.State.extend({
        route: '/preferences'
      })
    }),

    mail: Ember.State.extend({
      route: '/mail',

      index: Ember.State.extend({
        route: '/'
      }),

      preferences: Ember.State.extend({
        route: '/preferences'
      })
    })
  })
});

// If the user navigates to the page with the URL
// www.myapp.com/, you will start in the root.calendar.index state.
// The redirection to the calendar.index state will cause the URL
// to be updated to www.myapp.com/calendar

router.transitionTo('preferences');

// URL => www.myapp.com/calendar/preferences

router.transitionTo('mail.preferences');

// URL => www.myapp.com/mail/preferences

router.transitionTo('index');

// URL => www.myapp.com/mail

Answer 2

I use sproutcore-routing in my apps because:

• it plays nice with ember.js
• it is actively maintained
• it is used by some bigger ember.js apps (eg have a look at travis-ci routing code )

For documentation have a look at the spoutcore-routing tests

Answer 3

I strongly recommend this guide on the ember site: http://emberjs.com/guides/router_primer/

I believe this content is very new-- I certainly didn't notice it a couple of weeks ago when I first started trying to understand Ember routing.

Answer 4

Ember routing changed entirely over Christmas. They posted some new documentation to help, but removed all the old tutorials. I'm guessing the old ways of doing things (in the previous answers) will be deprecated. http://emberjs.com/guides/routing/

Answer 5

Edit: Due to significant changes in the Ember.js router, this answer is obsolete since around the 1.0 PRE-RELEASE . MOdern versions of ember.js should use the standard routing guidelines

I guess this is (at leas for now) very personal. I like ghempton's ember-routemanager. If you need some help with it I could help you. Together with his ember-layout package as well, they work nice together.

http://codebrief.com/2012/02/anatomy-of-a-complex-ember-js-app-part-i-states-and-routes/