javascript - knockout.js: Bind inner html to separate viewmodel -

in project, want dynamically generate menu using knockout. therefore, i'm binding section element viewmodel using html binding load content dynamically.

<div class="flex" data-bind="foreach:  { data: menuitems, afterrender: renderedhandler }">     <div class="lebordercontainer" data-bind="attr: {onclick: $data.clickevent}">         <img data-bind="attr: {src: $data.imageurl}" />         <h2 data-bind="text: $data.header"></h2>         <section data-bind="html: $data.content"></section>     </div> </div> 

this works fine regular html source code. however, requirement is, inner html nodes can should bound own viewmodel.

my first idea use afterrender event , apply new bindings inside there. approach failed in first place, because there viewmodel applied nodes.

let vm = {     menuitems: [] array<{ clickevent: () => void, imageurl: string, header: string, content: string, getviewmodel?: () => object }>,     renderedhandler: function (elements: array<htmlelement>, data: { clickevent: () => void, imageurl: string, header: string, content: string, getviewmodel?: () => object }) {         console.log(elements);         console.log(data);         if (data.getviewmodel) {             //console.log($(elements).find('section'));             ko.applybindings(data.getviewmodel(), elements[1]);         }        } }; 

after research found it's necessary unbind nodes before binding other viewmodel. again, didn't work because cleared section element.

then tried use binding in conjunction html binding. approach wasn't successful again, because isn't allowed use html , binding on same element.

<section data-bind="html: $data.content, with: $data.getviewmodel ? $data.getviewmodel() : null"></section> 

i have no idea, how make menu work. hope can me.

i found solution using template binding nodes parameter:

<section data-bind="template: { nodes: $($data.content), data: $data.getviewmodel ? $data.getviewmodel() : null }"></section>