[英]In Ember how can I have different html in a component used in multiple places?
I'm trying to make a dropdown component that can have different HTML in the heading/title. 我正在尝试制作一个在标题/标题中可以具有不同HTML的下拉组件。 I have this so far: 到目前为止,我有:
component: 零件:
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);
}
}
});
component template: 组件模板:
{{title}}<i class="fa fa-chevron-down"></i>
{{#if isOpen}}
{{yield}}
{{/if}}
application template: 应用模板:
{{#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}}
So the dropdown initially starts closed, displaying only the title (which is passed in) and some markup, displaying a thing to hover over and the content is revealed by some actions. 因此,下拉菜单最初开始关闭,仅显示标题(传入的标题)和一些标记,显示要悬停的内容,并且通过某些操作显示内容。
I'd like to be able to specify that heading/title markup each time I use the component but I can't figure out how. 我希望每次使用该组件时都可以指定标题/标题标记,但我不知道该如何做。
For example maybe I want another dropdown somewhere on the page but I'd like to include an image in the header or some other markup. 例如,也许我想要页面上某处的另一个下拉菜单,但是我想在标题或其他一些标记中包含一个图像。
Is this possible or would I have to make separate components for each type of dropdown? 这是可能的还是我必须为每种类型的下拉菜单分别制作组件? Like {{generic-dropdown}}
and {{image-dropdown}}
像{{generic-dropdown}}
和{{image-dropdown}}
If you want to get your project done quickly, then yes, just implement {{button-dropdown}}
and {{image-dropdown}}
. 如果您想快速完成项目,则可以,只需实现{{button-dropdown}}
和{{image-dropdown}}
。
Or, you could consider an approach where you implement the desired headers as components themselves: 或者,您可以考虑将所需的标头本身实现为组件的方法:
button-header/template.hbs 按钮的头/ template.hbs
<button {{action 'toggle'}}>{{content}}</button>
image-header/template.hbs 图像报头/ template.hbs
<img src="{{content}}">
Now you can define the component as 现在您可以将组件定义为
test-show/template.hbs 测试显示/ template.hbs
{{#component header content=content}}
{{yield}}
{{/component}}
This uses the new component
helper. 这将使用新的component
帮助器。
You would call this as 您将其称为
my-template.hbs 我-template.hbs
{{#test-show header='image-header' content='kitten.png'}}
This is some content.
{{/test-show}}
Untested. 未经测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.