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帮助程序。

您可以将其称为

MY-template.hbs

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

未测试。

在Ember中，如何在多个位置使用的组件中使用不同的html？

1 个答案: