Birden çok içerik parçasını bir ember.js bileşen şablonuna nasıl verebilirim?

Question

Amaç, arayan tarafından bildirilen birden çok içerik bloğu içeren bir HTML yapısını tanımlamaktır. Örneğin, bir başlık, gövde ve içerik. Elde edilen işaretleme olmalıdır:

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

, My body ve My footer üç bölümden her My header tanımlamak bileşeni başlatmasını şablonu.

Ruby on Rails ile, arayanın içeriğini yakalamak için content_for :header ve aradaki değeri girmek için yield :header kullanırsınız.

Bu, ember.js'de mümkün müdür?

Answer 1

Ember v1.10'dan itibaren verim kabul eder. Ancak, gidonlar henüz değişken değerlerin satır içi karşılaştırmasına izin vermez. Bileşen üzerindeki bazı özellikleri tanımlayarak, rayların yaptıklarına oldukça yakın olabiliriz.

Yukarıdaki örnekte Başına

, bileşenin şablon gibi görünecektir:

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

Ve bileşen tanım verim ifadeleri değişken argümanları çözmek olacaktır:

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

Bu {{yield header}} aslında demektir Tüketici şablonuna bir nesne {isHeader: true} vermek. Bu da bileşende nesne tanımları için ihtiyacı ortadan kaldırmak için basitleştirilmiş olabilir

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