Multiple nested routes in Ember.js having weird behaviour

Question

I'm starting out on Ember.js and I have a three level route for one of the pages. This is what the router map looks like:

App.Router.map(function(){
    this.resource('tests');
    this.resource('create', function() {
        this.resource('create.questions', {path: ':test_id' }, function() {
            this.resource('create.questions.question', {path: ':question_id'});
        });
    });
});

In my CreateRoute, I transition onto the create/questions route using the following code:

this.get('controller').transitionToRoute('create/questions', test);

Which works fine, but in my CreateQuestionsRoute, this code doesn't work:

this.get('controller').transitionToRoute('create/questions/question', question);

The error received:

Uncaught Error: Assertion Failed: Error: Assertion Failed: The route create/questions/question was not found

Using the Chrome Ember inspector plugin, I can see the routes are listed as such:

CreateRoute
CreateQuestionsRoute
CreateQuestions.QuestionRoute

This seems like arbitrary behaviour. There isn't much guidance on how to handle multiple nested routes. Some references told me that my route map should actually look like this:

App.Router.map(function(){
        this.resource('tests');
        this.resource('create', function() {
            this.resource('questions', {path: ':test_id' }, function() {
                this.resource('question', {path: ':question_id'});
            });
        });
    });

Whereby the route name would automatically be nested (no need for dot notations), but this did not work. Can anyone with Ember wisdom shine some light for me?

Kingpin2k Kingpin2k · Accepted Answer · 2014-06-11T01:20:02

Go with this:

App.Router.map(function(){
    this.resource('tests');
    this.resource('create', function() {
        this.resource('questions', {path: ':test_id' }, function() {
            this.resource('question', {path: ':question_id'});
        });
    });
});

The only reason to add namespace a resource is if the resource isn't unique. Which means from any route you can use

this.transitionTo('questions', model);

this.transitionTo('question', modelForQuestions, modelForQuestion);

Example: http://emberjs.jsbin.com/OxIDiVU/636/edit

If you want to keep your namespace, I'd go with camelCase instead of dot notation, since generally the dot means property on the current scope.

Example: http://emberjs.jsbin.com/OxIDiVU/637/edit

Multiple nested routes in Ember.js having weird behaviour

1 Answers