是否可以在运行时动态定义自定义组件模板中元素的类型?
在以下示例中,我想避免button
anda
元素的内部内容重复:
<template>
<button if.bind="!isLinkBtn">
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</button>
<a if.bind="isLinkBtn">
<!--
The content is a 1:1 duplicate of the button above which should be prevented
somehow in order to keep the view DRY
-->
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</a>
</template>
是否可以这样写:
<template>
<!--
The type of element should be defined at runtime and can be a standard HTML "button"
or an anchor "a"
-->
<element type.bind="${isLinkBtn ? 'a' : 'button'}">
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</element>
</template>
我知道动态组合,<compose view="${widget.type}-view.html"></compose>
但据我所知,这不允许我创建默认HTML元素,而只能创建自定义组件,对吗?
我在Aurelia Gitter上问了这个问题,Erik Lieben建议在其中使用@processContent(function)
装饰器,替换给定内容,function
然后返回true
以让Aurelia处理它。
不幸的是,我不知道如何实际应用这些说明,并希望这里有一些替代方法或有关如何实际完成此操作的详细信息。
编辑
我创建了一个相应的功能请求。即使提供了可能的解决方案,我也希望看到一些更简单的方法来解决这个问题;)
如果要重用HTML代码段,请使用compose。这样做不会创建新的自定义元素。它只是在每个compose元素的位置包含HTML。这样,所包含的HTML的视图模型与其所组成的元素的视图模型相同。
看看这个GistRun:https ://gist.run/ ? id = 36cf2435d39910ff709de05e5e1bedaf
custom-link.html
<template>
<button if.bind="!isLinkBtn">
<compose view="./custom-link-icon-and-text.html"></compose>
</button>
<a if.bind="isLinkBtn" href="#">
<compose view="./custom-link-icon-and-text.html"></compose>
</a>
</template>
custom-link.js
import {bindable} from 'aurelia-framework';
export class CustomLink {
@bindable() contentText;
@bindable() icon;
@bindable() isLinkBtn;
}
custom-link-icon-and-text.html
<template>
<span class="btn-icon">${icon}</span>
<span class="btn-text">${contentText}</span>
</template>
Consumer.html
<template>
<require from="./custom-link"></require>
<custom-link content-text="Here is a button"></custom-link>
<custom-link is-link-btn.bind="true" content-text="Here is a link"></custom-link>
</template>
您可能需要将它们拆分为单独的元素,例如<custom-button>
,<custom-link>
而不是使用is-link-btn
属性来控制其表示。您可以使用相同的技术来重用装饰器重用常见的HTML部分和组成,以重用常见的代码。
看到这个GistRun:https ://gist.run/ ? id = e9572ad27cb61f16c529fb9425107a10
对您的“不太详细”评论的回应
您可以将其简化为一个文件,并避免compose
使用上述GistRun和inlineView
装饰器中的技术:
看到这个GistRun:https ://gist.run/ ? id = 4e325771c63d752ef1712c6d949313ce
您只需要一个文件:
custom-links.js
import {bindable, inlineView} from 'aurelia-framework';
function customLinkElement() {
return function(target) {
bindable('contentText')(target);
bindable('icon')(target);
}
}
const tagTypes = {button: 'button', link: 'a'};
@inlineView(viewHtml(tagTypes.button))
@customLinkElement()
export class CustomButton {
}
@inlineView(viewHtml(tagTypes.link))
@customLinkElement()
export class CustomLink {
}
function viewHtml(tagType) {
let result = `
<template>
<${tagType}${tagType === tagTypes.link ? ' href="#"' : ''}>
<span class="btn-icon">\${icon}</span>
<span class="btn-text">\${contentText}</span>
</${tagType}>
</template>
`;
return result;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句