Controller/route conventions for nested routes in ember

Question

I have this resource with a nested route in my ember app:

router.js:

Router.map(function() {
  this.resource('posts', function () {
    this.route('show',  {path: '/:id'});
  });
});

What is the convention in ember for my controllers? Do I create a separate file for each URL, or does the show handler go in /controllers/posts.js? Or is there perhaps multiple correct ways of doing this?

This is what I have so far in /routes/posts.js:

import Ember from 'ember';

var PostsRoute = Ember.Route.extend({
  model: function() {
    return posts;
  }
});

var posts = [
  {
    id: '1',
    title: 'Object nr one',
    content: 'This is the content of Object nr one.'
  },
  {
    id: '2',
    title: 'Obelix',
    content: 'A fat gaul. From a comic book.'
  },
  {
    id: '3',
    title: 'Werner',
    content: 'Wat soek werner hier? Dis mos nou belaglik man.'
  }
];

export default PostsRoute;

And this is /controllers/posts.js:

import Ember from "ember";

export default Ember.ArrayController.extend({});

I would appreciate if someone showed me the correct way of doing things in this example.. I'm really struggling to find proper examples on the web.

Please note that I'm using ember CLI

Then what should the index route be? routes/posts/index.js? Or still routes/posts.js? @blessenm — Marco Prins
It will be routes/posts/index.js guides.emberjs.com/v2.15.0/tutorial/subroutes — R Sun

Daniel Kmak Daniel Kmak · Accepted Answer · 2015-01-22T09:47:20

"Show handler" never goes to controller file, it's rather a Route. You create separate route, controller, template for each of your resource or route directives. You can tell controller that it should have the same behaviour as other controller, or use a mixin. For example:

router.coffee:

@resource 'training', ->
      @route 'chest'
      @route 'shoulders'

Means you need following structure:

app/routes/training[your parent resource]/chest.js[your child route] app/routes/training/shoulders.js

If you need controller for each of this routes you would need files with following paths:

app/controllers/training/chest.js app/controllers/training/shoulders.js

And templates:

app/templates/training/chest.js app/templates/training/shoulders.js

It's because I've defined training as resource(parent) and routes as its children.

If you use Ember CLI you can use commands like:

ember g controller training/shoulders

or:

ember g route training/shoulders

Last command will generate you: Route, template and entry in router.js. You can use this commands so you won't have worry too much about your directory structure. However, it's important to remember that when you define resource inside a resource - child resource isn't really a child and it shouldn't be placed inside parent resource directory. For example:

@resource 'tracks', ->
  @resource 'track', path: '/track/:track_id', ->
    @route 'edit'

Means you need 2 directories to store route files:

app/routes/tracks/
index.js

app/routes/track/
edit.js

Instead of ~~app/routes/tracks/track/edit~~. So, in your example, for following router:

Router.map(function() {
  this.resource('posts', function () {
    this.route('show',  {path: '/:id'});
  });
});

app/routes should look like this:

app/routes:
 - posts.js # main route for whole resource
 - posts/ # directory which contains files for routes inside posts resource
   - show.js # posts/show route

Controller/route conventions for nested routes in ember

1 Answers