How can I assign a common template for ember components - ember.js

Question

I have several components and each of them have a template all the same, how can I assign a common template for ember components?

Answer 1

To have common templates between components i would probably do one of the following,
Inherit one component from the other, or from a base one to extend the layoutName property
example1: http://emberjs.jsbin.com/jewohekiwu/1/edit?html,js
Use a common partial helper
example2: http://emberjs.jsbin.com/helefevome/1/edit?html,js
also an article with inheritance no layoutName property and a common partial http://blog.yanted.com/2014/01/17/inheritance-with-ember-js-components/
example1
hbs
<script type="text/x-handlebars" data-template-name="index">
{{my-comp1 testProp="lala"}}
<br/>
{{!other-name-for-comp2 testProp="lolo2"}}
{{my-comp2 testProp="lolo"}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-comp1">
comp1 - testProp:{{testProp}}
</script>
js
App.MyComp1Component = Em.Component.extend({
layoutName:"components/my-comp1",
test:function(){console.log("comp1");console.log(this.get("testProp"));}.on("init")
});
App.MyComp2Component = App.MyComp1Component.extend({
test:function(){console.log("comp2");console.log(this.get("testProp"));}.on("init")
});
//Em.Handlebars.helper("other-name-for-comp2", App.MyComp2Component);
example2
hbs
<script type="text/x-handlebars" data-template-name="index">
{{my-comp1 testProp="lala"}}
<br/>
{{my-comp2 testProp="lolo"}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-comp1">
{{partial "_commonTemplate"}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-comp2">
{{partial "_commonTemplate"}}
</script>
<script type="text/x-handlebars" data-template-name="_commonTemplate">
comp1 - testProp:{{testProp}}
</script>
js
App.MyComp1Component = Em.Component.extend({
test:function(){console.log("comp1");console.log(this.get("testProp"));}.on("init")
});
App.MyComp2Component = Em.Component.extend({
test:function(){console.log("comp2");console.log(this.get("testProp"));}.on("init")
});