javascript - Aurelia - 按名称呈现自定义元素

Question

假设我们有一个自定义元素，它呈现一个列表something。它是一个选择器元素，所以它不关心这个东西是如何呈现的。

问题是这个something 非常通用，并且有自定义元素来实际呈现它。例如，我们为国家/地区添加了国旗图像，为一般元素添加了字体图标、用户声誉等。

我想要的

现在我想传递自定义元素的名称，我想用它来呈现something。所以不是这个

<selector data.one-way="options" selected.two-way="selected"></selector>

有类似的东西

<selector element="country" data.one-way="options" selected.two-way="selected"></selector>

在选择器中我想要

<${element} content.one-way="el" repeat.for="el of data"></${element}>

我得到了什么

不幸的是，上面的代码呈现为htmlescaped

<country content.one-way="el" repeat.for="el of data"></country>

那么，

是否有或多或少简洁的方法来实现这一点？基本上我想在我的选择器自定义元素中传递我想要呈现的指定自定义元素。 This post and the answer there与我的问题无关。

按照描述使用compose here ...嗯，这是一个选项，但我希望在 CustomElement js 文件中有不同的自定义元素和稍微不同的逻辑。

谢谢!

更新

好吧，有一个明显的方法可以做到这一点，只需在 View 中添加类似 switch 语句的内容即可

<country ... if.bind="el.type === 'country'"></country>
<phone ... if.bind="el.type === 'phone'"></phone>
<user ... if.bind="el.type === 'user'"></user>

但这会使 selector 元素依赖于 country、user 等。所以我不喜欢这样。

Answer 1

我相信最简单的方法是使用 compose 标签(就像你提到的那样):

<compose model.bind="item" view-model="widgets/${item.type}"></compose>