Рендеринг HTML-контента из результата AJAX

Question

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

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

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

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

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

Answer 1

Джон Резиг (чувак из jQuery) сделал супер простой шаблонный движок, который вы можете использовать на стороне клиента, у Рика Стрэла есть хороший пост об этом.

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

Обычно я не делаю ссылки Google, но в asp.net ajax (4.0?) Выходит клиентская шаблонизация , позволяющая вам брать объекты 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-элемента, клонирование и заполнение дочерних элементов правильными значениями. На мой взгляд, это чище и проще для понимания.