如何爲餘燼組件分配一個通用模板

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