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?

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?

• javascript
• ember.js
• ember-cli

Share Improve this question Follow edited Nov 14, 2014 at 13:44 Patsy Issa 11.3k55 gold badges5656 silver badges7474 bronze badges asked Nov 14, 2014 at 12:45 redOctober13redOctober13 4,02466 gold badges4040 silver badges6666 bronze badges 2

• The budget resource seems out of place,none of your resources nested in project are using a dynamic segment, why are they there in the first place. – Patsy Issa Commented Nov 14, 2014 at 13:47
• @PatsyIssa: because they are all pieces belonging to a project, so project/details, project/team, etc. – redOctober13 Commented Nov 14, 2014 at 16:08

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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./blog/2014/08/23/ember-1-7-0-released.html