如何为余烬组件分配一个通用模板

Question

我有几个组件，每个组件都有一个模板，我如何为余烬组件分配一个通用模板？

Answer 1

要使组件之间公共的模板我可能会执行下列操作中的一个，

1. 继承从另一个，或从一个基地一个部件延长layoutName属性

例1： http://emberjs.jsbin.com/jewohekiwu/1/edit?html,js

使用共同partial辅助

例2：http://emberjs.jsbin.com/helefevome/1/edit?html,js

还具有继承的制品没有layoutName属性和一个公共部分http://blog.yanted.com/2014/01/17/inheritance-with-ember-js-components/

例1 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); 

例题 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") 
});