CODEWITHSUNDEEP
javascriptember.js
Tom
Tom

Reputation: 400

Ember js - Switching to nested routing on existing ember app

My team and I are 4 weeks into an ember project and are now realizing that two of our routes should be nested instead of side by side. Currently we have 

this.route('conference', { path: '/conference' }, function() {
    this.route('index', { path: '/:id' });
    this.route('submission', { path: '/:id/submission'});
});

I'm thinking we will be switching to this (or something similar):

this.route('conference', { path: '/conference' }, function() {
    this.route('index', { path: '/:id' }), function() {
        this.route('submission', { path: '/:id'});
    };
});

We expect this to affect a lot of things in our ember app. We are trying to figure out the smoothest way to make this transition. I'm wondering first, if the code above is the best way to do it. There will be multiple conferences and each conference should support multiple submissions. I am also not sure how to go about structuring my folders. Are there 'ember generate' commands for this or do I need to manually change folders?

Hopefully someone has made this switch before and can offer some insight. Thanks.

Upvotes: 0

Views: 30

Answers (1)

NicholasJohn16
NicholasJohn16

Reputation: 2409

You're new route structure wouldn't work. You can't have two routes with the same path:

this.route('conference', { path: '/conference' }, function() {
    this.route('index', { path: '/:id' }), function() {
        this.route('submission', { path: '/:id/submission'});
    };
});

You should be able to generate everything with the below commands

ember g route conference
ember g route conference/index
ember g route conference/index/submission

You shouldn't have to manually manage the folder structure. Just keep controllers in the controllers folder and templates in the template folder, etc.

Upvotes: 1

Related Questions