Geek Answers Handbook

Organize ember templates in folders

I have a router card:

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'}); }); });

template files are stored in the "templates / eng" folder; for the routes "home" and "eng.rent" everything is in order: Ember can independently find where the template files are; but for other routes, I have to indicate where the template is located, for example:

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

Can someone explain how Ember searches for template files? For example, if I do not specify "renderTemplate" for EngRentBoulderSmallRoute, as indicated above, the template will not be displayed (even if I placed the file "boulderSmall.hbs" in the "template" folder instead of "template / eng", where Ember looks for this template by default ? And if I would like to save "boulderSmall.hbs" to the "templates / eng / rent" folder, which way should I pass the renderTemplate function?

+4
source share
2 answers

I finally got rid of it; kiwiupower's answer was correct, as Ember looks for template files in folders and subfolders as specified; the problem was caused by the yeomen that I use for development; in the grunt file, the default setting searches for Ember templates through only one level of folders;

to make yoman able to look even deeper in the template folder structure, I made the following changes:

1 to the view task for loading in a stream:

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

I added "** /" so that the task also tracks the second level of subfolders in the template directory

2 in the 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 added "{, /}" to the dist.files object; If you need a yoman to view / compile the third level of subfolders or more, you need to change these two tasks by adding more "* /" and "{, * /}"

+3
source

Your folder structure should look like this.

First you need to rename the route eng.rent rent , so that 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

Hope this helps. Greetings

+5
source

More articles:


All Articles