Structuring Ember application in subdirectories using Ember App Kit

3
votes

The directory structure in Ember App Kit dictates that all controllers go in the '/app/controllers/' directory; handlebars templates go in the '/app/templates/' directory, and so on.

However, my team are currently developing an Ember application in which the number of functional areas (and therefore source files) is continually growing, so we want to create subdirectories under these directories for our controllers, templates, etc, rather than group everything in the same directory.

We have done this for one functional area by organising our controller and corresponding handlebars template in the following manner:

/app/controllers/availability/availability.js
/app/templates/availability/availability.hbs

So far, the only way we have been able to get this approach to work (i.e. to link our controller and template in this nested directory structure) is to create the following route:

this.route('availability.availabilty', {path: "/availability"});

This has the side-effect of Ember creating the following for us:

Route Name: availability.availability
Route: AvailabilityAvailability
Controller: AvailabilityAvailabilityController
Template: availability/availability
URL: #/availability

The word 'Availability' is duplicated in the resulting Ember controller to echo our nested availability/availability directory structure.

Does anyone know of a better way of organising an application in subdirectories within Ember App Kit? This surely must be a common requirement for applications with a large number of source files.

We would wish, for example, for Ember to create the following for us:

Route Name: availability.availability
Route: AvailabilityAvailability
Controller: AvailabilityAvailabilityController
Template: availability/availability
URL: #/availability

Many thanks

2
ember.jsember-app-kit

2 Answers

1
votes

From the documentation on Nested directories http://iamstef.net/ember-app-kit/guides/naming-conventions.html it seems that you can do what you're looking to do with a single tweak. Instead of putting availability.js in the availability subfolder it should be one directory up, then all the sub availability controllers are placed in that subfolder.

+-- app
+-- controllers
|   +-- availability
|   |   +-- edit.js
|   +-- availability.js

+-- app
+-- templates
|   +-- availability
|   |   +-- edit.hbs
|   +-- availability.hbs
0
votes

Please look into ember-pods. http://cball.me/organize-your-ember-app-with-pods/

This is a way to structure your ember application in a way you were desiring.