【问题标题】：Aurelia - render custom element by nameAurelia - 按名称呈现自定义元素
【发布时间】：2015-12-10 03:09:45
【问题描述】：

假设我们有一个呈现something 列表的自定义元素。它是一个选择器元素，所以它不会影响这个 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>

在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与我的问题无关。

按照here 的描述使用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 等。所以我不喜欢这样。

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

我相信最简单的方法是使用compose 标签（就像你提到的那样）：

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

【讨论】：

【解决方案2】：

我找到了几个可能的解决方案，它们可能看起来比撰写更复杂。

@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/找到更多详细信息

【讨论】：