Amélioration progressive avec knockoutjs

Question

Disons que nous avons des données comme suit

var data = {
  facets: [{
    name : "some name",
    values: [{
      value: "some value" 
    }]
  }]
};

Nous pouvons facilement le représenter comme un modèle de vue lié à un modèle à élimination directe comme suit:

<ul data-bind="foreach: facets">    
  <li>      
    <span data-bind="text: name"></span>
    <ul data-bind="foreach: values">            
      <li data-bind="text: value"></li>     
    </ul>
  </li>
</ul>

La question est de savoir comment pouvons-nous atteindre le même résultat lors de l'utilisation de l'amélioration progressive? C'est-à-dire en ayant initialement le rendu du modèle du côté serveur, puis en liant le modèle knockout et le modèle de vue à ce rendu.

Un modèle de serveur simple ressemblerait à ceci:

<ul>    
  <li>      
    <span>some name</span>
    <ul>            
      <li>some value</li>       
    </ul>
  </li>
</ul>

J'ai exploré quelques possibilités différentes:

• L'une consiste à créer un modèle à élimination directe et à un modèle côté serveur, et générer dynamiquement le modèle de vue à élimination directe en analysant le DOM pour le modèle côté serveur. De cette façon, seul le modèle knockout serait visible lorsque JavaScript est activé, et seul le modèle côté serveur serait visible si JavaScript est désactivé. Ils pourraient être stylisés de manière à les rendre identiques.

• Une autre approche consiste à appliquer des liaisons pour chaque élément du tableau des facettes séparément à l'élément DOM existant pour cette facette. Cependant, ce n'est encore qu'un niveau de profondeur et ne fonctionne pas pour les éléments imbriqués.

Aucune de ces approches ne semble plutôt propre. Une autre solution pourrait être d'écrire une liaison personnalisée qui gère l'ensemble du rendu et réutilise les éléments existants si possible.

D'autres idées?