How to name a standalone handlebars file that's indexed for ember?

0
votes

In the peepcode screencast that was released earlier this week I noticed that you can provide a convention for a handlebars template inline using something like

data-template-name="index/tables"

But if I move this template out of my HTML file to a standalone .handlebars file what is the correct name for this? And what template name does ember need to set this to if I precompile it?

ember.TEMPLATES[ ??? ]

Thank you in advance

2
ember.jshandlebars.js
What are you using to compile your app? – Andre Malan

2 Answers

2
votes

The solution I was looking for came from @wycats himself

if this is your nested script template (in some html file)

<script type="text/x-handlebars" data-template-name="tables/index"></script>

and you decide to remove the inline script and make it a standalone file you will need to precompile it and register the template like so 

var input = Ember.Handlebars.precompile("{{outlet}}");
Ember.TEMPLATES['tables/index'] = Ember.Handlebars.template(input);

this file will be called index.handlebars nested under the "tables" directory, nested under the "templates" directory

For anyone following this, I did add support for nested templates to the npm module I wrote for django developers (django-ember-precompile)

1
votes

I think a lot of it depends on what you are using to compile Ember. Brunch will do things differently to Sprockets.

But some general things:

If the template is in a .handlebars file, then there is nothing needed in the file itself, aside from what you want in your template.

The file structure and naming conventions just need to match up with your router. So a file tree may look like this:

javascripts/templates/index/tables.handlebars

Using the Rails Asset Pipeline and Ember Gem, there is no need to tell Ember about the templates, as long as they are in the app/assets/javascripts/templates folder.

When we were using Brunch (but this was on a much older version of Ember) we had to manually require all the files just using a standard JavaScript require like:

require('templates/topnav');