Nested Resources in ember-cli, messy app structure

Question

As a newbie to both Ember.js and ember-cli, I'm having trouble making sense of what seems necessary to make my app work.

The logical hierarchy of my app is something like this:

Projects
|___Project
    |___Details
    |___Team Members
    |___Budget
        |___Planned
        |___Actual

And currently, this is my router.js:

  this.resource('projects');
  this.resource('project', { path: 'projects/:project_id' }, function() {
    this.route('details');
    this.route('team');
    this.route('milestones');
    this.resource('budget', function(){
      this.route('project-budget', { path: 'project'});
      this.route('resource-budget', {path: 'team'});
    });
  });

What I'm having trouble with is where to put my files. Up until the point of the two nested routes under Budget, my folder structure looked like my hierarchy, but since a Resource resets the namespace, now to make it work I have to pull my Budget template, route, and controller back out to the top level (with Projects stuff), which just seems messy and like it will cause headaches when trying to maintain this thing later.

Am I doing it wrong?

Answer 1

Router definition can be a little tricky in Ember. Your resource/route definition in router.js should reflect your page structure. So for example, if your 'team' template should be nested inside your 'project' template, then 'team' should be nested inside of 'project' in router.js:

Router.map(function() {
    this.resource('project', function() {
         this.route('team');
    });
});

If you use this.route() in router.js, then your folder structure should mimic the structure in router.js. Using the example above, because we're using this.route() to define 'team', your folder structure would be like this:

app/routes/project.js
app/routes/project/team.js
app/templates/project.hbs
app/templates/project/team.hbs

If, however, you choose to use use this.resource() in router.js, then you're telling Ember that you're going to reset your folder structure. So if you changed router.js to this:

Router.map(function() {
    this.resource('project', function() {
         this.resource('team');
    });
});

...then your folder structure would be like this:

app/routes/project.js
app/routes/team.js
app/templates/project.hbs
app/templates/team.hbs

Going back to your specific question, if you feel that resetting your folder structure is messy, then you can use this.route() everywhere and forego this.resource(), because nestable this.route() landed in Ember 1.7: http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html