Wie kann ich mehrere Teile von Inhalten in eine ember.js-Komponentenvorlage einfügen?

Question

Ziel ist es, eine HTML-Struktur zu definieren, die mehr als einen Inhaltsblock enthält, der vom Aufrufer deklariert wird. Zum Beispiel Header, Body und Inhalt. Die sich ergebende Auszeichnungs sollte sein:

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

Die Vorlage der Komponente Instanziieren würde jeder der drei Abschnitte definieren, My header, My body und My footer.

Mit Ruby on Rails würden Sie content_for :header verwenden, um den Header-Inhalt des Aufrufers und yield :header zu interpolieren.

Ist das in ember.js möglich?

Answer 1

Ab Ausgabe V1.10 akzeptiert yield Parameter. Der Lenker erlaubt jedoch noch keinen direkten Vergleich von Variablenwerten. Indem wir einige Eigenschaften auf der Komponente definieren, können wir ziemlich nah an die Schienen heran kommen.

Per obigen Beispiel der Vorlage Komponente würde wie folgt aussehen:

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

Und die Komponentendefinition würde die variablen Argumente auf die Ausbeute Aussagen beheben:

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

Das bedeutet, dass {{yield header}} tatsächlich ist Ergeben eines Objekts {isHeader: true} zu der verbrauchenden Vorlage. So können wir eine verschachtelte if/else-Struktur verwenden, um die drei Abschnitte wie folgt zu deklarieren:

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