knockout.js: Lier html interne pour séparer viewmodel

Question

Dans mon projet, je veux générer dynamiquement un menu en utilisant Knockout. Par conséquent, je lie un élément de section au viewmodel en utilisant la liaison HTML pour charger dynamiquement le contenu.

<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> 

Cela fonctionne très bien pour le code source HTML standard. Cependant, une autre exigence est que ces nœuds HTML internes puissent parfois être liés à leur propre modèle de vue.

Ma première idée était d'utiliser l'événement afterRender et d'appliquer les nouvelles liaisons à l'intérieur. Cette approche a échoué en premier lieu, car il existait déjà un modèle de vue appliqué à ces nœuds. Après quelques recherches, j'ai trouvé qu'il est nécessaire de dissocier ces nœuds avant de se lier à l'autre modèle de vue. Encore une fois, cela n'a pas fonctionné parce qu'il a complètement effacé mon élément de section.

Ensuite, j'ai essayé d'utiliser une liaison avec en conjonction avec la liaison html. Cette approche n'a pas réussi à nouveau, car il n'est pas autorisé à utiliser un code HTML et à lier le même élément.

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

Je n'ai aucune idée, comment je pourrais faire fonctionner mon menu. J'espère que quelqu'un peut m'aider.

Answer 1

je trouve une solution en utilisant le modèle de liaison avec le paramètre de nœuds:

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