W jaki sposób mogę dostarczyć wiele elementów do szablonu komponentu ember.js?

Question

Celem jest zdefiniowanie struktury HTML zawierającej więcej niż jeden blok treści zadeklarowanej przez wywołującego. Na przykład nagłówek, treść i treść. Otrzymany znaczniki powinny być:

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

Szablon uruchamianiu składnik może definiować każdej z trzech części, My header, My body i My footer.

Z Ruby on Rails użyjesz content_for :header do przechwycenia zawartości nagłówka od dzwoniącego, a yield :header do interpolacji.

Czy to jest możliwe w ember.js?

Answer 1

Począwszy od ember v1.10, dochód przyjmuje parametry. Jednak kierownica nie pozwala jeszcze na wbudowane porównania wartości zmiennych. Definiując niektóre właściwości komponentu, możemy zbliżyć się do tego, co robi szyny.

Na powyższym przykładzie, szablon tego komponentu będzie wyglądać następująco:

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

a definicja składnika rozwiąże zmienne argumentów do sprawozdania wydajność:

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

Oznacza to, że {{yield header}} jest rzeczywiście dostarczając obiekt {isHeader: true} do szablonu konsumującego. Możemy więc użyć zagnieżdżonej struktury if/else do zadeklarowania trzech sekcji w następujący sposób:

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