Is the directory structure expected for namespaced routes?

Question

I've created a namespaced route called checkout.

I have the following in router.js.

// router.js
this.route('checkout', function() {
  this.resource('payments', function() {
  });
});

The following routes can be accessed via:

http://localhost/checkout/payments

However, the controllers, templates, routes for payment, don't exist in the the checkout directory. I would have imagined:

app/controllers/checkout/payments/index.js
app/routes/checkout/payments/index.js
app/templates/checkout/payments/index.hbs

But instead they exist and can be accessed by Ember in:

app/controllers/payments/index.js
app/routes/payments/index.js
app/templates/payments/index.hbs

Is this expected?

Answer 1

That it works at all is partially due to what Asgaroth describes: resources reset the namespace so in your example ember-cli is looking for a class Payments rather than CheckoutPayments, and partially due to ember-cli supporting two directory layouts (the regular one and the "pod" layout). While it builds the application it takes the name of classes from the file or the directory, depending on which is most appropriate.

You are basically mixing and matching the two approaches to the file system layout, which is why it works at all. But it would be incredibly difficult to figure out what belongs to what without a better structure in place.

Instead I'm using the ember generate --pod ... structure with them (which should become recommended for Ember 2.0), which results in a somewhat similar structure for my files as in your question:

app/map
├── debug
│   ├── controller.js
│   ├── route.js
│   └── template.hbs
├── index
│   ├── controller.js
│   └── template.hbs
├── settings
│   ├── controller.js
│   └── template.hbs
├── systems
│   ├── system
│   │   ├── route.js
│   │   └── template.hbs
│   ├── controller.js
│   ├── route.js
│   └── template.hbs
├── controller.js
└── template.hbs

And yes, you can nest routes (since Ember 1.7 or so) and with ES6 modules it brings little benefit to use resources over routes. I've stopped using them, as per the structure above my router.js now is a rather trivial:

this.route( 'map', function() {
  this.route( 'systems', function() {
    this.route( 'system', { path: ':system_id' } );
  });
  this.route( 'settings' );
  this.route( 'debug' );
});

I can highly recommend the pod structure for your routers, controllers, mixins and components .. it takes some getting used to though, and your editor has to show directory names to be able to know what you are editing.