Emberjs pre4 nested route default URI

Question

Can some one explain why nested resources require to list the path hierarchy in the route name instead of just the route?

Eg. resource1 > resource1.resource2

Emberjs seems to be all about reducing the amount of code. Is there some usecase for resources I don't see which explains why resources should be defined this way.

I couldn't get my example to work in jsfiddle or jsbin so I hosted it here: http://emberjs.mattmazzola.net/

I was basing my solution from the technique described in this similar StackOverflow question is here: Ember.js pre4 multiple nested routing

Basically, you notice I have a resource 'animals' with sub resources 'cats' and 'dogs'. However, if I just name them 'cats' and 'dogs' respectively the router says "route animals.cats' is not found. Then if I add the 'animals.' prefix to make the nested route 'animals.cats' the url becomes index#/animals/animals.cats which doesn't make sense. Of course we fix this by overriding the path attribute, but I don't understand why Emberjs doesn't do this by default. Am I defining my resources/routes incorrectly and this is a side affect?

In other words, I'm currently doing this:

App.Router.map(function() {
    this.resource('products', function() {
        this.route('desktops');
        this.route('laptops');
    });
    this.resource('animals', function() {
                // the url for this route is bad, but default behavior?
        this.resource('animals.cats', function() {
            this.route('cat', {path: ':cat_id'});
        });
        // Why does this require stating the parent route 'animals' again?
        this.resource('animals.dogs', {path: 'dogs/'}, function() {
            this.route('dog', {path: ':dog_id'});
        });
    });

});

How can I write routes like this:

App.Router.map(function() {
    this.resource('products', function() {
        this.route('desktops');
        this.route('laptops');
    });
    this.resource('animals', function() {
        this.resource('cats', function() {
            this.route('cat', {path: ':cat_id'});
        });
        this.resource('dogs', function() {
            this.route('dog', {path: ':dog_id'});
        });
    });
});

Finn MacCool Finn MacCool · Accepted Answer · 2013-03-25T16:59:38

hmm, i think the second version should work if you have App.AnimalsIndexRoute, App.CatsIndexRoute and App.DogsIndexRoute (and possibly a few other Ember.Routes) defined correctly. could you maybe post the rest of your code here or in a jsfiddle if you still have that problem?

Emberjs pre4 nested route default URI

1 Answers