Aurelia - render custom element by name

3
votes

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.

What I would like to have

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

What I get

Unfortunately, the code above renders as htmlescaped

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

So,

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!

UPD

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.

2
javascriptaurelia

2 Answers

3
votes

I believe easiest way is using the compose tag (like you've mentioned):

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

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/