Динамическое создание (AJAX) HTML

Question

Я ищу вход на эту тему, как описано ниже. В частности, я ищу «самый известный метод» или шаблон проектирования, который описывает динамическую сборку HTML.

Это очень распространенная задача для меня: Отправьте что-нибудь на сервер через POST -> получите список результатов в формате JSON -> возьмите этот список из 0 до n результатов и покажите их, часто как список. Как правило, это означает создание фактического HTML в Javascript (JQuery) с чем-то вроде:

HTMLResult = "<div id=....  " 
HTMLResult = HTMLResult + JSONDataElement 
HTMLResult = "</div>" 
... 

Затем добавить каждый элемент с помощью JQuery или объединять их и заменить HTML некоторых контейнера дел.

Мне это надоело. Это ошибка склонная, уродливая, неэффективная и т. Д.

Я бы скорее сделал что-то еще OO. Возможно, элемент будет определяться каким-то образом - это в сНу, пролетом, что он содержит ... так что я могу сделать что-то вроде этого:

tempElement = new Element 
tempElement.text = JSONData.text 
ResultsList.addElement(tempElement) 

Я ищу какой-либо вклад в более эффективные способы делать то, что я описал. Я предпочитаю минимальный набор инструментов: HTML, CSS, jQuery.

(Также как построить HTML на бэкэнд, в данном случае Django)?

Answer 1

Клонирование элементов, предположительно, довольно быстро, так что я иногда делаю это включает шаблоны элементов, которые будут генерироваться в исходной странице, с display: none. Затем, когда я получаю данные с сервера, я могу

var newElement = $('#some-template').clone().removeAttr('id'); 

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

newElement.html(newElement.html().supplant(paramObj)); 

где paramObj имеет значения для замены заполнителей и supplant берется из Crockford. Разумеется, изменение прототипа String не без проблем, но в этом случае легко избежать использования функции.

Answer 2

Почему вы не думаете о написании общей функции с параметрами целевого элемента Dom и данных, которые нужно добавить? Вы можете думать о общий метод, как:

function GenericAjaxResponseHandler(TargetElement, AjaxResponse) 
{ 
    //Implemet the handler here 
} 

Answer 3

Как уже упоминалось, самый простой способ для создания новых элементов на внутреннем интерфейсе, где у вас есть полный контроль над созданием в чистом HTML .. В то время как на стороне клиента, вы должны создавать все эти элементы программно. Однако самый большой недостаток этого метода заключается в том, что вы убиваете повторное использование поставщика JSON.

Если вы заинтересованы в данном многократном использовании, успокоительные как система и создание объектно-ориентированного элемента, я хотел бы предложить Dean Edward's Base JS class, что упрощает ООП в JavaScript и могу помочь вам многое в создании вашему изготовленный на заказ элементов и строителей.

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

Если одна из ваших проблем является создание элемента JQuery эффективность, прочитайте это question

Answer 4

1. Попросите веб-дизайнера, чтобы создать довольно фиктивный список, если он/она уже не создал один
2. Удалить все подставные список элементов, но один
3. Скрыть последний оставшийся элемент списка (например, дисплей: нет)
4. В последнем оставшемся элемент, создать заполнители для переменных, отправленных сервером (например пролетных)
5. В вашем JavaScript, глубоко клонировать элемент, сделать замены, сделать элемент видимым, и прикрепить элемент к соответствующему узлу

Я бы не генерировать HTML на сервере.