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

Aurelia - render custom element by name

本文关键字：自定义 元素 Aurelia-      更新时间：2023-09-26

假设我们有一个自定义元素，该元素呈现某个东西的列表。它是一个选择器元素，所以它不影响这个东西的渲染方式。

问题是，这个东西是相当通用的，并且有自定义元素来实际渲染它。例如，对于国家，我们添加了一个旗帜图像，对于通用元素-字体图标，用户的声誉，等等。

我想要什么

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

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

有类似的东西

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

在selector中，我想要

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

我得到的

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

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

所以

有没有一种或多或少干净的方法来实现这一点？基本上，我想在选择器自定义元素中传递我想要呈现的指定自定义元素。这篇帖子和那里的答案与我的问题无关。

使用此处所述的compose。。。好吧，这是一个选项，但我希望在CustomElement js文件中有不同的自定义元素和稍微不同的逻辑。

谢谢！

UPD

好吧，有一种明显的方法可以做到这一点，只需在视图中添加一些类似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等。所以我不喜欢这样。

我认为最简单的方法是使用compose标签（就像您提到的）：

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

我找到了两个可能的解决方案，它们看起来可能比组合更复杂。

@bindable({
  name:'myProperty', //name of the property on the class
  attribute:'my-property', //name of the attribute in HTML
  changeHandler:'myPropertyChanged', //name of the method to invoke when the property changes
  defaultBindingMode: ONE_WAY, //default binding mode used with the .bind command
  defaultValue: undefined //default value of the property, if not bound or set in HTML
})

你可以在那里找到更多详细信息http://www.sitepoint.com/extending-html-aurelia-io-way/

相关文章：