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

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='' repeat.for='thing of listOfThings'>${}</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.


The template engine has an enhance method which allows you pretty much to do exactly the same. Take a look here for a sample
The docs and further googling should give you enough hints


This is wonderful! Thanks @zewa666!

1 Like

Using the Gist @bigopon provided in the SO post as the basis, I created this stupid simple example.

Thanks again, @zewa666 for setting me in the right direction. Between @bigopon’s SO answer and @dwaynecharrington’s great post I feel like I’ve just gained a new superpower!


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


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

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