javascript - 我可以为 Ember 组件提供模板名称吗

Question

我想要这样的东西：

App.SimplyHelloComponent = Em.Component.extend({
                       classNames: ['bold', 'italic', 'blue']

                       templateName:'my-temp'
                });

Answer 1

是的，您可以指定模板名称。我刚试过，它有效。就是这样：

App.SimplyHelloComponent = Ember.Component.extend({

    layoutName: 'components/my-temp'

});

script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>

现在你可以这样调用你的组件：

{{simply-hello}}

Answer 2

根据您的评论编辑的答案

在您发表评论后，我做了一些测试，并且您在正确的地方进行了测试，为了让一切正常工作，您应该遵循约定并将您的类名命名为与您的模板相同，因此EmberTestComponent应该调用模板components/ember-test。

例如假设你有这个组件类：

App.EmberTestComponent=Ember.Component.extend({
  templateName:'components/ember-test'
});

那么你的模板应该是这样的：

<script type="text/x-handlebars" data-template-name="components/ember-test">
  <h1>{{title}}</h1>
  <p>{{body}}</p>
</script>

但由于这是默认行为，templateName因此也可以省略在组件类中定义 ，从而生成简单的类定义，例如：

App.EmberTestComponent=Ember.Component.extend({});

但是，您的模板包含components前缀很重要。同样重要的是，按照惯例，组件模板名称必须在其名称中包含 a "-"。

然后，您可以像这样使用您的自定义组件：

<script type="text/x-handlebars" data-template-name="index">
  {{#each}}
    {{ember-test title=title body=body}}
  {{/each}}
</script>

还要注意我们如何将所需的参数传递给组件，title并且body，这是必要的，因为您的组件对它的上下文一无所知，它只会引用我们传递给它的信息，这就是组件 BTW 的全部意义。如您所见，它包含我们在模板中使用组件时设置的变量名称。

希望能帮助到你。

Answer 3

这可行，但'components/'作为前缀添加到templateName为查找提供的内容中。

因此，如果您想使用名称'my-temp'，请使用

<script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>

对于内联模板或让您的构建工具my-temp从components/模板子目录预编译您的模板。