Timo Korinth

2 Meter, 2 Mark

Understanding routing in Ember.js

| 0 comments

One of the first things you will come across in Ember development is the routing mechanism. If’ve had a hard time figuring out the concept and differences to other routing approaches until I really understand the benefits of the Ember routing provider. To help you getting started with Ember development, I got some key insights to share with you:

  1. The overall concept is Convention over Configuration
    • That also means that Ember will generate classes (e.g. Controller, Routes etc…) for you, if you do not explicitly define them. That is especially true if you define routes: If you just specify the route name, Ember will automatically create an appropriate route, controller and (empty) template for you. To override the default behavior, you can create one of these objects (creating subclasses) and hook up your own code.
  2. Think of routes as application states
    • It is important that you fully understand the whole concept of ember routing. The main goal (in contrast to many other routing frameworks) is to define application states and make them additionally available through a URL.
    • Route = State + URL
  3. Use of nested routes
    • You can’t nest routes but resources. The important thing: A route nested under a resource will get (by convention) the name of its parent resource + its own name. BUT a resource nested under a resource will just get its own name.

To clarify the last point, here’s an example. Take this route / resource structure:

this.resource('IdentityManagement', function () {
    this.resource('Identities', function () {

        this.resource('Identity', { path: '/:id' }, function () {
            this.route("Edit");
        });
        this.route("New");

        this.resource('Visitors', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });

        this.resource('Void', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });

        this.resource('SalesTeam', function () {
            this.resource('Identity', { path: '/:id' }, function () {
                this.route("Edit");
            });
            this.route("New");
        });
    });
});

This structure will lead to the following routes (a subset of all routes that will be implicitly be created by Ember):

App.IdentityManagementRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.IdentitiesRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.VoidRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

App.IdentityEditRoute = Ember.Route.extend({
    model: function (param) {
        return App.Contact.find();
    }
});

Leave a Reply