Progressivo miglioramento con knockoutjs

Question

Diciamo che abbiamo dati come segue

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

Possiamo facilmente rappresentare questo come modello di visualizzazione legata a un modello a eliminazione diretta come segue:

<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 domanda è: come possiamo ottenere lo stesso risultato quando si utilizzano un miglioramento progressivo? Cioè, avendo inizialmente il rendering del modello sul lato server e quindi vincendo il modello a eliminazione diretta e il modello di visualizzazione a quel rendering.

Un semplice modello lato server sembrerebbe qualcosa di simile:

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

Ho esplorato alcune possibilità diverse:

• Uno è creare un modello knockout e un modello lato server e generare il modello di visualizzazione a eliminazione diretta in modo dinamico analizzando il DOM per il modello lato server. In questo modo, solo il modello di knockout sarebbe visibile quando JavaScript è abilitato e solo il modello lato server sarebbe visibile se JavaScript fosse disabilitato. Potrebbero essere disegnati in modo da renderli identici.

• Un altro approccio è quello di applicare attacchi per ciascun elemento nell'array di sfaccettature separatamente all'elemento DOM esistente per quella sfaccettatura. Tuttavia, questo è ancora solo un livello profondo e non funziona per gli elementi nidificati.

Nessuno di questi approcci sembra piuttosto pulito. Un'altra soluzione potrebbe essere quella di scrivere un vincolo personalizzato che gestisce l'intero rendering e riutilizza elementi esistenti, se possibile.

Qualche altra idea?