3

I am precompiling my templates using grunt-ember-templates. This tool is putting my templates in the Ember.TEMPLATES array, as expected. I am finetuning the configuration of grunt-ember-templates. For that I would like to know what is the expected key in the Ember.TEMPLATES array. Let's say I have this template:

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

Currently I have this template in a file called app/templates/phones_index.hbs, and grunt-ember-templates is putting the pre-compiled template in Ember.TEMPLATES["app/templates/phones_index"], but this is wrong.

What is the expected key for data-template-name="phones/index"?

CraigTeegarden
  • 8,173
  • 8
  • 38
  • 43
blueFast
  • 41,341
  • 63
  • 198
  • 344
  • 1
    I believe you should compile the contents of `app/templates` directory, ignoring the directory segment in file names, so you don't get it translated into the template name. Ideally `phones/index.hbs` should translate into `App.TEMPLATES["phones/index"]`. Note that `_` is used for partials (e.g.: `phones/_form.hbs` for a general purpose form linked to the phone resource) so it might not be a good idea to use it in templates other than partial templates. I'm not the best person on Grunt tho, so I can't really tell how you should do it. – MilkyWayJoe Apr 08 '13 at 19:54

1 Answers1

4

In your example the key in Ember.TEMPLATES should be "phones/index".

You can configure grunt-ember-templates to drop the first part of your path and leave everything after app/templates/ which will give you the correct key assuming you place your template inside of file app/templates/phones/index.hbs. Using this set up, the key for the app/templates/phones/index.hbs file will be Ember.TEMPLATES['phones/index'], which is the same as having an uncompiled <script> tag with data-template-name="phones/index".

Gruntfile.js (same as the Gruntfile.js in this project):

ember_templates: {
  options: {
    templateName: function(sourceFile) {
      return sourceFile.replace(/app\/templates\//, '');
    }
  },
  'dependencies/compiled/templates.js': ["app/templates/**/*.hbs"]
},
CraigTeegarden
  • 8,173
  • 8
  • 38
  • 43
  • Way simpler than I thought +1 – MilkyWayJoe Apr 08 '13 at 20:11
  • Thanks. I will then put all phone-related templates in an `app/templates/phones` directory. But then I have a problem: where to put the template related to `data-template-name="phone"`, or to `data-template-name="phone/edit"`? – blueFast Apr 08 '13 at 20:14
  • An another question: you say "which is the same as having an uncompiled – blueFast Apr 08 '13 at 20:17
  • you would place `data-template-name="phone"` into `app/templates/phone.hbs` and `data-template-name="phone/edit"` into `app/templates/phone/edit.hbs`. Any directory structure besides the `app/templates/` will be used in the key name. – CraigTeegarden Apr 08 '13 at 20:18
  • your `*.hbs` files will not have any ` – CraigTeegarden Apr 08 '13 at 20:19