gpt4 book ai didi

javascript - 在 Ember 中,如何在多个地方使用的组件中拥有不同的 html?

转载 作者:行者123 更新时间:2023-12-03 10:15:18 25 4
gpt4 key购买 nike

我正在尝试制作一个在标题/标题中可以有不同 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}}

最佳答案

如果您想快速完成项目,那么可以,只需实现 {{button-dropdown}}{{image-dropdown}} 即可。

或者,您可以考虑一种将所需 header 实现为组件本身的方法:

button-header/template.hbs

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

image-header/template.hbs

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

现在您可以将组件定义为

test-show/template.hbs

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

这使用了新的组件帮助器。

您可以将其称为

my-template.hbs

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

未经测试。

关于javascript - 在 Ember 中,如何在多个地方使用的组件中拥有不同的 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29903327/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com