ember.js - 给定数据模板名称的匹配模板名称是什么

Question

我正在使用 grunt-ember-templates 预编译我的模板。正如预期的那样，该工具将我的模板放入 Ember.TEMPLATES 数组中。我正在微调 grunt-ember-templates 的配置。为此，我想知道 Ember.TEMPLATES 数组中的预期键是什么。假设我有这个模板:

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

目前，我将此模板放在名为 app/templates/phones_index.hbs 的文件中，并且 grunt-ember-templates 正在将预编译的模板放入 >Ember.TEMPLATES["app/templates/phones_index"]，但这是错误的。

data-template-name="phones/index" 的预期 key 是什么？

Answer 1

在您的示例中，Ember.TEMPLATES 中的键应为“电话/索引”。

您可以配置 grunt-ember-templates 来删除路径的第一部分，并保留 app/templates/ 之后的所有内容。假设您将模板放在文件 app/templates/phones/index.hbs 中，这将为您提供正确的 key 。使用此设置，app/templates/phones/index.hbs 的 key 文件将是 Ember.TEMPLATES['phones/index'] ，这与未编译的 <script> 相同标记为 data-template-name="phones/index" .

Gruntfile.js(与 this 项目中的 Gruntfile.js 相同):

ember_templates: {
  options: {
    templateName: function(sourceFile) {
      return sourceFile.replace(/app\/templates\//, '');
    }
  },
  'dependencies/compiled/templates.js': ["app/templates/**/*.hbs"]
},