我可以在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之類的某些屬性為true時，主體才顯示。 但是，如果單擊主體，則isExpanded將變為false。

我可以制作一個可以接受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}}