title: knockout.js: Bind inner html to separate viewmodel
body: <p>In my project, I want to dynamically generate a menu by using Knockout. Therefore, I'm binding a section element to the viewmodel using the HTML binding to load the content dynamically.</p>
  
  <pre><code>&lt;div class="flex" data-bind="foreach:  { data: menuItems, afterRender: renderedHandler }"&gt;
      &lt;div class="leBorderContainer" data-bind="attr: {onclick: $data.clickEvent}"&gt;
          &lt;img data-bind="attr: {src: $data.imageUrl}" /&gt;
          &lt;h2 data-bind="text: $data.header"&gt;&lt;/h2&gt;
          &lt;section data-bind="html: $data.content"&gt;&lt;/section&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine for regular HTML source code. However, another requirement is, that those inner HTML nodes can should sometimes be bound to their own viewmodel.</p>
  
  <p>My first idea was to use the afterRender event and apply the new bindings inside there. This approach failed in the first place, because there was an viewmodel already applied to those nodes.</p>
  
  <pre><code>let vm = {
      menuItems: [] as Array&lt;{ clickEvent: () =&gt; void, imageUrl: string, header: string, content: string, getViewModel?: () =&gt; object }&gt;,
      renderedHandler: function (elements: Array&lt;HTMLElement&gt;, data: { clickEvent: () =&gt; void, imageUrl: string, header: string, content: string, getViewModel?: () =&gt; object }) {
          console.log(elements);
          console.log(data);
          if (data.getViewModel) {
              //console.log($(elements).find('section'));
              ko.applyBindings(data.getViewModel(), elements[1]);
          }   
      }
  };
  </code></pre>
  
  <p>After some research I found that it's necessary to unbind those nodes before binding to the other viewmodel. Again, this didn't work because it completely cleared my section element.</p>
  
  <p>Then I tried to use a with binding in conjunction with the html binding. This approach wasn't successful again, because it isn't allowed to use an html and with binding on the same element.</p>
  
  <pre><code>&lt;section data-bind="html: $data.content, with: $data.getViewModel ? $data.getViewModel() : null"&gt;&lt;/section&gt;
  </code></pre>
  
  <p>I have no idea, how I could make my menu work. I hope that someone can help me.</p>