5

我想要这样的东西:

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

                       templateName:'my-temp'
                });
4

3 回答 3

1

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

App.SimplyHelloComponent = Ember.Component.extend({

    layoutName: 'components/my-temp'

});

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

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

{{simply-hello}}
于 2014-06-17T19:12:14.430 回答
1

根据您的评论编辑的答案

在您发表评论后,我做了一些测试,并且您在正确的地方进行了测试,为了让一切正常工作,您应该遵循约定并将您的类名命名为与您的模板相同,因此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 的全部意义。如您所见,它包含我们在模板中使用组件时设置的变量名称。

希望能帮助到你。

于 2013-09-16T08:09:06.610 回答
0

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

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

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

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

于 2013-09-16T04:33:53.773 回答