Organize ember templates in folders

Question

I have a router map like this:

this.resource('eng', function(){
    this.route('home');
    this.resource('eng.rent', {path: 'rent' }, function(){
        this.route('boulderSmall', {path: 'boulder-small'});
        this.route('boulderXl', {path: 'boulder-xl'});
    });     
});

the template files are stored in "templates/eng" folder; for the "home" and "eng.rent" routes everything is ok: Ember can find by itself where the template files are; but for the other routes i have to specify where the template is, like:

Importclimbing.EngRentBoulderSmallRoute = Importclimbing.StdEngRoute.extend({
    renderTemplate: function() {
        this.render('eng/boulderSmall');
    }
});

Can someone explain how Ember looks for template files? For example, if i don't specify "renderTemplate" for EngRentBoulderSmallRoute as above, the template will not render (even if i put the "boulderSmall.hbs" file into "template" folder instead of "template/eng"; and so, where Ember look for this template by default? And if i would like to store "boulderSmall.hbs" into "templates/eng/rent" folder, which path should i pass to renderTemplate function?

Answer 1

Your folder structure should look like this.

First you need to rename the eng.rent route rent so the router looks like this

this.resource('eng', function(){
    this.route('home');
    this.resource('rent', {path: 'rent' }, function(){
        this.route('boulderSmall', {path: 'boulder-small'});
        this.route('boulderXl', {path: 'boulder-xl'});
    });     
});

Then your templates and folders should be named this way.

templates          ## this is a folder
  |--eng           ## this is a folder
      |--home.hbs
  |--rent      ## this is a folder
      |--boulder_small.hbs
      |--boulder_xl.hbs
  application.hbs
  eng.hbs
  rent.hbs

I hope this helps. Cheers

Answer 2

Finally i got rid of this; the kiwiupower's answer was correct, since Ember looks for template files in folders and subfolders as indicated; the problem was due to yeoman, that i use for development; in the gruntfile, the default setup looks for Ember templates only through one level of folders;

to make yeoman able to look also deeper in templates folder structure, i made this changes:

1 to the watch task for livereload:

 emberTemplates: {
            files: '<%= yeoman.app %>/templates/**/**/*.hbs',
            tasks: ['emberTemplates', 'livereload']
        },

I've added a "**/" in order to let the task watch also the second level of subfolders in templates directory

2 in Ember templates task:

 emberTemplates: {
        options: {
            templateName: function (sourceFile) {
                var templatePath = yeomanConfig.app + '/templates/';
                return sourceFile.replace(templatePath, '');
            }
        },
        dist: {
            files: {
                '.tmp/scripts/compiled-templates.js': '<%= yeoman.app %>/templates/{,*/}{,*/}*.hbs'
            }
        }
    }

I've added a "{,/}" into the dist.files object; If you need yeoman to watch for/ compile third level of subfolders or more, you need to modify this two tasks adding more "*/" and "{,*/}"