如何将多个内容生成到ember.js组件模板中？

Question

目标是定义一个HTML结构，其中有多个由调用者声明的内容块。例如，标题，正文和内容。将得到的标记应该是：

<header>My header</header> 
<div class="body">My body</div> 
<footer>My footer</footer> 

模板实例化组件将定义每个的三段，My header，My body，和My footer。

使用Ruby on Rails，您可以使用content_for :header捕获来自调用者的头部内容，并使用yield :header对其进行插值。

这是可能的ember.js？

Answer 1

从ember v1.10开始，yield将接受参数。但是，句柄不允许内联比较变量值。通过在组件上定义一些属性，我们可以非常接近rails的功能。

每上面的例子中，该组件的模板看起来像：

<header>{{yield header}}</header> 
<div class="body">{{yield body}}</div> 
<footer>{{yield footer}}</footer> 

和组件的定义就解决了可变参数的产量声明：

export default Ember.Component.extend({ 
    header: {isHeader: true}, 
    footer: {isFooter: true}, 
    body: {isBody: true} 
}); 

这意味着{{yield header}}实际上是产生消费模板的对象{isHeader: true}。因此，我们可以使用嵌套的if/else结构的三段声明是这样的：

{{#my-comp as |section|}} 
    {{#if section.isHeader}} 
    My header 
    {{else if section.isBody}} 
    My body 
    {{else if section.isFooter}} 
    My footer 
    {{/if}} 
{{/my-comp}}