В Ember я могу передать разметку компоненту?

Question

Я пытаюсь создать компонент выпадающего типа, который может иметь некоторую разметку для заголовка, а затем при наведении указателя мыши открывается больше разметки. Что-то вроде этого:

{{#dropdown-menu}} 

    {{#dropdown-header}} 
     <span>My Custom Title markup</span> 
    {{/dropdown-header}} 

    {{#dropdown-body}} 
     list of menu items 
    {{/dropdown-body}} 

{{/dropdown-menu}} 

Тело должно отображаться только в том случае, когда свойство, такое как isExpanded, является истинным. Но если щелкнуть тело, isExpanded станет ложным.

Я могу создать рабочий компонент, который принимает свойство title (строка), но я не могу понять, как сделать заголовок включением пользовательской разметки.

Answer 1

Вы можете поместить yield в свой компонент в блок if. посмотреть jsbin

компонент: шаблон

App.TestShowComponent = Ember.Component.extend({ 
    layoutName: "components/test-show", 
    expanded: false, 
    actions: { 
    toggle: function() { 
     this.set('expanded', !this.get('expanded')); 
    } 
    } 
}); 

индекс:

{{#test-show}} 
    inner stuff 
{{/test-show}} 

шаблон компонента:

<button {{action 'toggle'}}>toggle</button> 
{{#if expanded}} 
    {{yield}} 
{{/if}}