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.
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
<${element} content.one-way="el" repeat.for="el of data"></${element}>
Unfortunately, the code above renders as 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.
Thanks!
Well, there's an obvious way to do that by just adding something like a switch statement in the view
<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.
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/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments