[英]Aurelia - render custom element by name
Suppose we have a custom element that renders a list of something . 假设我们有渲染的东西列表的自定义元素。 It is a selector element, so it does not atter how this something is rendered.
它是一个选择器元素,所以它不会如何呈现这个东西 。
The problem is that this something is quite generic and there are custom elements to actually render it. 问题是这个东西很通用,并且有实际渲染它的自定义元素。 For example, for countries we add a flag image, for general elements - a fontawesome icon, reputation for users, etc.
例如,对于国家/地区,我们为一般元素添加了一个标记图像 - 一个fontawesome图标,用户的声誉等。
And now I would like to pass the name of the custom element I want to render something with. 现在我想通过我想要呈现的东西自定义元素的名称。 So instead of this
所以不要这样
<selector data.one-way="options" selected.two-way="selected"></selector>
Have something like 有类似的东西
<selector element="country" data.one-way="options" selected.two-way="selected"></selector>
And in the selector
I would like to have 在我想要的
selector
中
<${element} content.one-way="el" repeat.for="el of data"></${element}>
Unfortunately, the code above renders as htmlescaped 不幸的是,上面的代码呈现为htmlescaped
<country content.one-way="el" repeat.for="el of data"></country>
Is there a more or less clean way to achieve that? 是否有一种或多或少的干净方式来实现这一目标? Basically I would like to pass the specify custom elements I want to render in my selector custom element.
基本上我想传递我想要在我的选择器自定义元素中呈现的指定自定义元素。 This post and the answer there have nothing to do with my question.
这篇文章和答案与我的问题无关。
Using compose
as described here ... well, it is an option, but I would like to have different custom elements and a slightly different logic in CustomElement js files. 使用这里描述的
compose
......好吧,它是一个选项,但我想在CustomElement js文件中有不同的自定义元素和稍微不同的逻辑。
Thanks! 谢谢!
Well, there's an obvious way to do that by just adding something like a switch statement in the view 好吧,通过在视图中添加类似switch语句的东西,有一种明显的方法可以做到这一点
<country ... if.bind="el.type === 'country'"></country>
<phone ... if.bind="el.type === 'phone'"></phone>
<user ... if.bind="el.type === 'user'"></user>
But that would make the selector
element dependent on country
, user
etc. So I would not like that. 但这会使
selector
元素依赖于country
, user
等。所以我不喜欢这样。
我认为最简单的方法是使用compose
标签(就像你提到的那样):
<compose model.bind="item" view-model="widgets/${item.type}"></compose>
I found couple possible solutions, they may seems more complicated then 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
})
You can find more details there http://www.sitepoint.com/extending-html-aurelia-io-way/ 您可以在那里找到更多详细信息http://www.sitepoint.com/extending-html-aurelia-io-way/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.