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




knockout.js progressive-enhancement (4)

Боюсь, что нет чистого способа сделать это. Лично я делаю страницу в бэкэнд, а затем передаю одни и те же контекстные данные в интерфейс (сериализуется как JSON) и настраиваю нокаут, используя его. Это означает, что существует некоторое дублирование. Возможно, переключение backend на node.js упростит ситуацию здесь.

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

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 для этой грани. Однако это все еще только один уровень глубины и не работает для вложенных элементов.

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

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


Просто добавьте различные атрибуты data- в шаблоны на стороне сервера. Они не пострадают, если JavaScript отключен, поэтому их вообще не проблема.


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


Прогрессивное улучшение намного проще с нециклическими данными, такими как формы (как я писал здесь: http://www.tysoncadenhead.com/blog/using-knockout-for-progressive-enhancement ). Лично я считаю, что переплетение нескольких элементов в DOM и их повторное рендеринг похоже на то, что это была бы жесткая реализация, но сложно думать о чем-то лучше.





progressive-enhancement