foreach with an array of DOM elements?

[mattlacey]

Ahead of wanting to move our large KO codebase over to TKO, I figured I'd put TKO to use on a smaller project we have that's currently built entirely in VanillaJS. I'm using a library for some WebRTC video support, and some of it functionality works through it inserting elements that represent feeds into the DOM, which works fine but I'd like to keep that list of feeds in an observableArray for easy re-ordering etc. It has got a mode that instead of inserting the element can provide it to an event handler function, but despite using KO for years I can't think of an idiomatic way of iterating over an array of DOM elements and inserting them. Took a punt on the HTML binding (which I know is supposed to work with strings) but that didn't do it.

It feels like an anti-pattern for sure but I'm at the mercy of the library, so just wondering if anyone knows of an approach for this that'll allow me to remove my existing reordering functionality that uses standard DOM manipulation functions, like remove and append.

[danieldickison]

Is there a way for the WebRTC library to populate its UI into an existing DOM element? Perhaps you could use an afterRender binding to have WebRTC “take over” the list elements that TKO inserts.

[mattlacey]

That's actually what it does now if I don't ask it to give me the list, but I have to use vanilla JS to insert DOM elements inside of those elements for various buttons, manually assigning click event handlers etc., and I'd love to be able to drive that through a template and bindings instead.

Thinking about it now, I guess if I track how many entries there should be I could use an array of my own objects for TKO to render, and then use after render to manually insert the appropriate library-created element into a known slow. Might give that a whirl to see how it goes.