在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将变为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}}