如何將多個內容生成到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}}