What is the matching template name for a given data-template-name

Question

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"?

Answer 1

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"]
},