Question

我想要这样的事情：

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

                       templateName:'my-temp'
                });

Answer 1

根据您的意见编辑的答案

在您发表评论之后，我做了一些测试，而您在哪里正确，为了让一切正常工作，您应该遵循约定并将您的类名命名为与模板相同，因此EmberTestComponent的模板应该被调用{{ 1}}。

例如，假设您有此组件类：

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。

然后使用您的自定义组件：

"-"

另请注意我们如何将所需参数传递给组件<script type="text/x-handlebars" data-template-name="index"> {{#each}} {{ember-test title=title body=body}} {{/each}} </script>和title，这是必要的，因为您的组件对其上下文一无所知，它只会引用我们传递的信息进入它，这是BTW组件的重点。正如您所看到的，它包含我们在模板中使用组件时设置的变量名称。

希望它有所帮助。

Answer 2

是的，您可以指定模板名称。我只是尝试了它的工作原理。以下是：

App.SimplyHelloComponent = Ember.Component.extend({

    layoutName: 'components/my-temp'

});

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

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

{{simply-hello}}

Answer 3

这样做有效，但'components/'被添加为为查询提供的templateName的前缀。

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

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

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

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

3 个答案:

根据您的意见编辑的答案