javascript - Прогрессивное улучшение с помощью KnockoutJS

Допустим, у нас есть данные следующим образом

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

Мы можем легко представить это как модель представления, связанную с шаблоном нокаута следующим образом:

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

Вопрос в том, как мы можем добиться того же результата при использовании прогрессивного улучшения? То есть, сначала создавая визуализацию шаблона на стороне сервера, а затем привязывая шаблон нокаута и модель представления к этому рендерингу.

Простой шаблон на стороне сервера будет выглядеть примерно так:

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

Я изучил несколько различных возможностей:

• Один из них - создать один шаблон для нокаута и один шаблон на стороне сервера и динамически генерировать модель представления нокаута, анализируя DOM для шаблона на стороне сервера. Таким образом, только шаблон нокаута будет виден, когда JavaScript включен, и только шаблон на стороне сервера будет виден, если JavaScript отключен. Их можно было бы создать так, чтобы они выглядели одинаково.

• Другой подход - применить привязки для каждого элемента массива граней отдельно к существующему элементу DOM для этой грани. Однако это все еще только один уровень глубины и не работает для вложенных элементов.

Ни один из этих подходов не выглядит довольно чистым. Другим решением может быть создание пользовательской привязки, которая обрабатывает весь рендеринг и повторно использует существующие элементы, если это возможно.

Любые другие идеи?