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>

而在 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 here...好吧，这是一个选项，但我想在 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 等。所以我不喜欢这样。

Answer 1

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

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

Answer 2

我找到了几个可能的解决方案，它们看起来比 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/

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

Aurelia - render custom element by name

javascript

我想要什么

我得到了什么

所以，

UPD