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

假设我们有一个自定义元素来呈现某个列表。它是一个选择器元素，因此它不尝试如何呈现该内容

问题是，这是非常通用的，并且有自定义元素来实际渲染它。例如，对于国家，我们添加了国旗图像，用于一般元素-图标、用户声誉等

我想要什么 现在，我想传递我要渲染的自定义元素的名称。所以不是这个

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

我得到了什么 不幸的是，上面的代码呈现为htmlescaped

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

---

但这会使

选择器

元素依赖于

国家

，

用户

等。所以我不喜欢这样。

我认为最简单的方法是使用

组合

标记（如您所述）：

---

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

@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
})

你可以在那里找到更多细节

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

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

<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
})