给定数据模板名称的匹配模板名称是什么答案

【问题标题】：What is the matching template name for a given data-template-name给定数据模板名称的匹配模板名称是什么
【发布时间】：2013-04-08 19:42:06
【问题描述】：

我正在使用 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" 的预期密钥是什么？

【问题讨论】：

我相信你应该编译app/templates目录的内容，忽略文件名中的目录段，这样你就不会把它翻译成模板名。理想情况下，phones/index.hbs 应转换为 App.TEMPLATES["phones/index"]。请注意，_ 用于部分模板（例如：phones/_form.hbs 用于链接到电话资源的通用表单），因此在部分模板以外的模板中使用它可能不是一个好主意。我不是 Grunt 的最佳人选，所以我真的不知道你应该怎么做。

标签： ember.js gruntjs grunt-ember-templates

【解决方案1】：

在您的示例中，Ember.TEMPLATES 中的键应该是“phones/index”。

您可以配置 grunt-ember-templates 以删除路径的第一部分并将所有内容保留在 app/templates/ 之后，假设您将模板放在文件 app/templates/phones/index.hbs 中，这将为您提供正确的密钥。使用此设置，app/templates/phones/index.hbs 文件的键将是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"]
},

【讨论】：

比我想象的要简单+1
谢谢。然后，我会将所有与电话相关的模板放在app/templates/phones 目录中。但是后来我有一个问题：与data-template-name="phone"或data-template-name="phone/edit"相关的模板放在哪里？
另一个问题：您说“这与使用带有 data-template-name="phones/index" 的未编译
您可以将data-template-name="phone" 放入app/templates/phone.hbs 并将data-template-name="phone/edit" 放入app/templates/phone/edit.hbs。除了app/templates/ 之外的任何目录结构都将用于键名。
你的*.hbs文件中不会有任何<script>标签，你应该只把模板的内容放在里面。例如：github.com/trek/…，是的，键名由app/templates/后面的文件路径/文件名确定