Can you dynamically create a new element and bind "repeat.for" dynamically?

Framework Knowledge
1

In my continued attempts at getting really silly and trying to do things I probably shouldn’t, I pose this question.

I want to do something to the effect of:

this.listOfThings.push({ id: 1, name: 'boo' });

let container = document.getElementById('container0');
container.innerHTML = "<div id.bind='thing.id' repeat.for='thing of listOfThings'>${thing.name}</div>"

I know this doesn’t work, but is there a concept I’m overlooking that will allow me to do something like this or is this a dead end?

I know compose or a custom element will allow it, but I’m looking for the freedom of defining the element inline, as shown, but still reaping the benefits of having the templating engine taking care of managing the items dynamically as they are added or removed from the collection the element’s repeat is bound to.

3 Likes
2

The template engine has an enhance method which allows you pretty much to do exactly the same. Take a look here for a sample https://stackoverflow.com/questions/47509171/how-to-dynamically-enhance-html-with-aurelia
The docs and further googling should give you enough hints

4 Likes
3

This is wonderful! Thanks @zewa666!

1 Like
4

Using the Gist @bigopon provided in the SO post as the basis, I created this stupid simple example.
https://gist.run/?id=df94e4a7a2f0a5d5a357e22087523f7d

Thanks again, @zewa666 for setting me in the right direction. Between @bigopon’s SO answer and @dwaynecharrington’s great post https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/ I feel like I’ve just gained a new superpower!

3 Likes
5

Yep that one from @dwaynecharrington is golden. Didnt find it right away otherwise i’d have linked it right away.

2 Likes
6

Enhance is especially powerful when working in CMS environments or generally when html is dynamically placed e.g via DB queries or often also jquery plugins such as GoldenLayout. I’m using that for the Webtestit IDE, where every panel is a dedicated enhanced view

1 Like
7

Glad that old post of mine is still relevant and helpful to some people. You’re welcome guys.

3 Likes