Как правильно реализовать ajax загрузку контента?

Question

[life]

Доброго времени суток. Необходимо реализовать ajax загрузку контента при клике на кнопку. Появилось несколько вопросов. Как правильно генерировать необходимые элементы для последующей вставки в страницу?

Рассматривал разные варианты:

1. Через конкатенацию строк ('[tag]' + data['some'] + '[/tag]');
2. Через создание элементов с помощью методов jQuery;
3. Шаблонизатор.

В первом случае получается не очень красиво. Во втором много кода. Шаблонизатор устраивает полностью, но подключать его для такой простой задачи не очень хочется.

Вот пример моего "кода":

var project = $('.projects-s__col').first().clone();

project.find('.projects-s__col-header-left p').html(data[i].name);
project.find('.projects-s__col-header-right p').html(data[i].category);
project.find('img').attr('src', data[i].thumbnail);
project.find('.projects-s__col-button').attr('href', '/project/' + data[i].id);
project.find('.projects-s__area p').html(data[i].area + ' м' + '<sup>2</sup>');
project.find('.projects-s__price p').html(data[i].price + ' руб.');

$('.projects-s__col').last().after(project);

Если потребуется необходимость очистить этот блок и получить новые данные (например отсортированные по цене), адекватно ли будет очищать данный блок методом empty(), а затем вставлять по новой?

И как вообще проверить, что созданный элемент уже загрузился?

Answer 1

[Дмитрий]

я бы делал через шаблон, такого вида

var template = '';
data.forEach(function(item, i, arr) {

			template = template + "<div class='review_post'>"+
							"<div class='review_post_header'>"+
								"<span class='review_name'>"+
								arr[i].name+
								"</span>"+
								"<span class='review_date'>"+
								arr[i][msg_date]+
								"</span>"+
							"</div>"+
							"<div class='review_post_message'>"+
							arr[i].message+
							"</div>"+
						"</div>";
	});

Это быстрее чем с руками генерить элементы.
ну и соответсвенно получается в переменной template строка, ты эту строку делаешь как element.innerHTML = template; где element это например див в который должен вставится контент

Answer 2

[mark_slepkov]

Я за шаблонизатор. Даже самый корявый шаблонизатор избавит вас (или того, кто будет после вас) от проблемы чтения кода через месяц, год и т.д

Answer 3

[lega]

Пример: plnkr.co/edit/6hqLe1NYzBlHF6Q2BFNY?p=preview