Оказание HTML-содержимого из результата AJAX

Question

Я пишу приложение, которое отображает список объектов «Job» из ответа AJAX JSON.

Каков наилучший способ визуализации разметки из возвращаемых данных. Теперь я довольно убежден, что его плохая идея создать разметку HTML на стороне сервера и вернуть ее из вызова AJAX. Из опыта это делает HTML трудно поддерживать, а повторный факторинг контента - это кошмар, поэтому я возвращаю коллекцию объектов Job как JSON.

Вопрос в том, как визуализировать HTML на основе ввода пользователем? Я видел несколько примеров создания шаблона разметки на странице, затем используйте JQuery для клонирования и заполнения соответствующими данными вставки в DOM.

Проблема заключается в том, что шаблон содержит видимое содержимое (изображения и т. П.), И приложение необходимо деградировать, поэтому у меня есть ретранслятор на странице, на котором отображается код севера и заполняется при загрузке страницы, если JS недоступен.

Любые советы будут оценены.

Answer 1

John Resig (jQuery pude) сделал супер простой механизм шаблонов, который вы можете использовать клиентов, Рик Страхл имеет a good post об этом.

У Trimpath есть удивительное решение для шаблонирования клиентов, которое называется Javascript Templates - не самое воображаемое имя, но это действительно неплохо.

Я обычно не делать Google ссылки, но asp.net Ajax (4,0?) Имеет некоторые client side templating выходит, что дадут вам взять объекты JSON и привязку их прямо.

В противном случае, я «Я буду защищать дьяволов и сказать« что случилось с семантическим HTML »?. Пока это семантический и имеет классы, а не жестко закрепленные стили, я лично не вижу ничего плохого в возвращении HTML с вашего вызова на сервер. Несомненно, это не так, как чистый как другие решения, но это лучший сайт. В некоторых случаях я даже обнаружил, что его проще поддерживать, поскольку вы позволяете «серверному кодеру» возвращать HTML со встроенными классами, а «клиентский кодер» может стилизовать до 6 способов для воскресенья :-)

Answer 2

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

$.ajax({ 
    url: 'foo', 
    dataType: 'json', 
    success: function(data) { 



     var container = $('<div />') 
         .attr('id', 'container'); 

     for(var i in data.items) { 
      var child = $('<div />') 
         .addClass('container-child'); 

      var title = $('<p />') 
         .html(data.items[i].title) 
         .addClass('item-title'); 

      var description = $('<p />') 
           .html(data.items[i].description) 
           .addClass('item-description'); 

      child.append(title).append(description); 

      container.append(child); 
     } 

     // Remove existing container 
     $('div#container').remove(); 
     // And replace it with the just created one 
     $('body').append(container); 
    } 
}); 

Этого метод так же быстро, как с помощью фиктивного HTML элемента, клонирования, что и заселения дочерних элементов с правильными значениями. По-моему, это чище и легче понять.