在Ember中，如何在多個地方使用的組件中具有不同的html？

Question

我正在嘗試制作一個在標題/標題中可以具有不同HTML的下拉組件。 到目前為止，我有：

零件：

export default Ember.Component.extend({
  tagName: 'span',
  isOpen: false,
  classNames: ['dropdown-toggle'],

  mouseEnter: function() {
    if (!this.get('isOpen')) {
      this.set('isOpen', true);
    }
  },

  mouseLeave: function() {
    if (this.get('isOpen')) {
      this.set('isOpen', false);
    }
  },

  click: function() {
    if (this.get('isOpen')) {
      this.set('isOpen', false);
    }
  }
});

組件模板：

{{title}}<i class="fa fa-chevron-down"></i>
{{#if isOpen}}
  {{yield}}
{{/if}}

應用模板：

  {{#dropdown-menu title=fullName}}
  <ul role="menu">
    <li><a href="#">Item 1</a></li>
    <li class="divider hidden-xs"></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
  {{/dropdown-menu}}

因此，下拉菜單最初開始關閉，僅顯示標題（傳入的標題）和一些標記，顯示要懸停的內容，並且通過某些操作顯示內容。

我希望每次使用該組件時都可以指定標題/標題標記，但我不知道該如何做。

例如，也許我想要頁面上某處的另一個下拉菜單，但是我想在標題或其他一些標記中包含一個圖像。

這是可能的還是我必須為每種類型的下拉菜單分別制作組件？ 像{{generic-dropdown}}和{{image-dropdown}}

Answer 1

如果您想快速完成項目，則可以，只需實現{{button-dropdown}}和{{image-dropdown}} 。

或者，您可以考慮將所需的標頭本身實現為組件的方法：

按鈕的頭/ template.hbs

<button {{action 'toggle'}}>{{content}}</button>

圖像報頭/ template.hbs

<img src="{{content}}">

現在您可以將組件定義為

測試顯示/ template.hbs

{{#component header content=content}}
    {{yield}}
{{/component}}

這將使用新的component幫助器。

您將其稱為

我-template.hbs

{{#test-show header='image-header' content='kitten.png'}}
    This is some content.
{{/test-show}}

未經測試。