如何为ember组件分配通用模板

Question

我有几个组件，每个组件都有一个相同的模板，如何为ember组件分配一个通用模板？

Answer 1

要在组件之间使用通用模板，我可能会执行以下操作之一，

1. 从另一个组件继承一个组件，或从基础组件继承一个组件以扩展layoutName属性

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

1. 使用常见的partial帮助

example2：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);

<强>示例2 的 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")
});