我想要这样的东西:
App.SimplyHelloComponent = Em.Component.extend({
classNames: ['bold', 'italic', 'blue']
templateName:'my-temp'
});
我想要这样的东西:
App.SimplyHelloComponent = Em.Component.extend({
classNames: ['bold', 'italic', 'blue']
templateName:'my-temp'
});
是的,您可以指定模板名称。我刚试过,它有效。就是这样:
App.SimplyHelloComponent = Ember.Component.extend({
layoutName: 'components/my-temp'
});
script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>
现在你可以这样调用你的组件:
{{simply-hello}}
在您发表评论后,我做了一些测试,并且您在正确的地方进行了测试,为了让一切正常工作,您应该遵循约定并将您的类名命名为与您的模板相同,因此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 的全部意义。如您所见,它包含我们在模板中使用组件时设置的变量名称。
希望能帮助到你。
这可行,但'components/'
作为前缀添加到templateName
为查找提供的内容中。
因此,如果您想使用名称'my-temp'
,请使用
<script type="text/x-handlebars" data-template-name="components/my-temp">
...
</script>
对于内联模板或让您的构建工具my-temp
从components/
模板子目录预编译您的模板。