Главная страница   /   12.1. Понимание задачи, которую решают шаблоны (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

12.1. Понимание задачи, которую решают шаблоны

Шаблоны данных решают очень специфичную задачу: они позволяют программно генерировать элементы из свойств и значений JavaScript объектов. Это можно сделать и другим способом. На самом деле, кое-что похожее я делал и в главе 11, когда создавал дополнительные элементы, чтобы представить новую цветочную продукцию в примере документа. В листинге 12-1 представлен соответствующий код из той главы.

Листинг 12-1: Программное создание элементов
<script type="text/javascript">
	$(document).ready(function () {
		var fNames = ["Carnation", "Lily", "Orchid"];
		var fRow = $('<div id=row3 class=drow/>').appendTo('div.dtable');
		var fTemplate = $('<div class=dcell><img/><label/><input/></div>');
		for (var i = 0; i < fNames.length; i++) {
			fTemplate.clone().appendTo(fRow).children()
				.filter('img').attr('src', fNames[i] + ".png").end()
				.filter('label').attr('for', fNames[i]).text(fNames[i]).end()
				.filter('input').attr({ name: fNames[i], value: 0, required: "required" })
		}
	});
</script>

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

С более широкой точки зрения, потребность интегрировать данные в документ является распространенной задачей, которую нужно решать. В моих проектах она возникает в двух ситуациях. Первая заключается в том, что я работаю с некоторой предшествующей системой, содержащей данные, которые управляют моим веб приложением. Я мог бы получить данные и интегрировать их в документ на сервере – и для этого существуют отличные технологии – но это обозначает, что мои сервера будут тратить много времени на ту работу, которую мог бы сделать для меня браузер. Если вы когда-нибудь создавали и управляли веб приложением большого объема, вы знаете, что затраты существенны, и стоит принимать всерьез любую возможно снизить требуемые объемы обработки.

И второй причиной, почему мне нужно интегрировать данные в документ, является то, что мое веб приложение передает данные через Ajax в ответ на действия пользователя. Я подробно расскажу о jQuery поддержке для Ajax в главах 14 и 15, но коротко, вы можете получать и отображать данные с сервера без перезагрузки всей страницы в браузере. Это мощная технология, которая широко используется, и библиотека шаблонов данных хорошо с ней работает.