Главная страница   /   12.3. Первый пример использования шаблона данных (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

12.3. Первый пример использования шаблона данных

Лучший способ начать изучение шаблонов данных – это сразу же приступить к работе с ними. В листинге 12-3 показаны базовые возможности шаблонов. В этот листинг я включил полный HTML документ из-за способа, которым мы устанавливаем шаблоны, используя элемент script, но я покажу вам релевантные элементы в дальнейших примерах.

Листинг 12-3: Первый пример шаблона данных
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<script src="jquery.tmpl.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			var data = [
				{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99 },
				{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99 },
				{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99 },
				{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50 },
				{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12 },
				{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99 },
			];

			$('#flowerTmpl').tmpl(data).appendTo('#row1');

		});
	</script>
	<script id="flowerTmpl" type="text/x-jquery-tmpl">
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}:</label>
			<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
				value="0" required />
		</div>
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow"></div>
				<div id="row2" class="drow"></div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button>
		</div>
	</form>
</body>
</html>

В следующих разделах я разделю пример и объясню каждую часть. Если данные являются частью документа, они известны как встроенные данные. Альтернативой являются удаленные данные, это когда вы получаете данные от сервера отдельно от документа. Удаленных данных мы коснемся далее в этой главе, но это затрагивает поддержку jQuery для Ajax, что является темой глав 14 и 15.

Определение данных

Начальной точкой примера являются данные, которые в данном случае представляют собой массив объектов, каждый из которых описывает отдельную единицу цветочной продукции. В листинге 12-4 показаны соответствующие выражения из документа.

Листинг 12-4: Определение данных по цветам
var data = [
	{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99 },
	{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99 },
	{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99 },
	{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50 },
	{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12 },
	{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99 },
];

Вы выражаете ваши данные как один или более JavaScript объектов. Библиотека шаблонов jQuery очень гибка, когда речь идет о виде объектов, которые могут быть использованы в качестве данных, но формат, показанный в шаблоне, используется наиболее часто, потому что он соответствует формату данных JSON, о чем я расскажу в главе 14.

Совет

JSON важен, потому что он часто используется с Ajax, о чем я расскажу в главах 14 и 15.

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

Определение шаблона

Как вы можете себе представить, в сердце библиотеки шаблонов данных находится шаблон данных. Это набор HTML элементов, содержащих метки-заполнители (placeholders), которые соответствуют аспектам объектов данных. В листинге 12-5 показан шаблон для этого примера.

Листинг 12-5: Определение шаблона данных
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		<img src="${product}.png" />
		<label for="${product}">${name}:</label>
		<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
			value="0" required />
	</div>
</script>

Первая вещь, касаемо шаблона, на которую стоит обратить внимание, – это то, что он содержится внутри элемента script со значением атрибута type равном text/x-jquery-tmpl. Мы делаем это для того, чтобы браузер не интерпретировал содержание шаблона как обычный HTML. Это не совсем обязательно, но это хорошая практика, которая поможет избежать многих потенциальных проблем.

Вторым моментом, на который стоит обратить внимание, является то, что когда вы определяете шаблон в элементе script, вы назначите имя шаблона, используя атрибут id. В нашем случае шаблон называется flowerTmpl. Вам нужно знать имя шаблона, когда вы его применяете к вашим данным.

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

Когда библиотека шаблонов обрабатывает шаблон, она замещает любые метки-заполнители данных значениями свойств объекта, с которым работает. Так, например, первый объект в массиве библиотека шаблонов свяжет с меткой ${product} и заменит ее значением свойства единицы продукции, то есть в данном случае astor. Вот эта часть шаблона:

<img src="${product}.png"/>

трансформированная в это:

<img src="astor.png"/>

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

Применение шаблона

Мы сводим шаблон, используя метод tmpl. Это позволяет указать данные, которые мы хотим использовать, и шаблон, который должен быть к ним применен. В листинге 12-6 показано использование этого метода.

Листинг 12-6: Использование шаблона данных
$('#flowerTmpl').tmpl(data).appendTo('#row1');

Я использую jQuery $ функцию, чтобы выбрать элемент, который содержит шаблон, а затем для результата вызываю метод tmpl, передавая в качестве аргумента данные, которые вы хотите обработать.

Метод tmpl возвращает стандартный jQuery объект, который содержит элементы, полученные из шаблона. В нашем случае я завершаю это набором элементов div, каждый из которых содержит элемент img, label и input, которые были обработаны для одного из объектов в моем массиве данных. Я использую метод appendTo, что вставить полный набор дочерних элементов для row1. Результат можно увидеть на рисунке 12-2.

Рисунок 12-2: Использование шаблона данных

Настройка результата

Мы не получили полностью того результата, который ожидали, потому что вся продукция расположена на одной линии. Но поскольку мы работаем с объектом jQuery, мы можем делать с элементами все, что мы и делали раньше. В листинге 12-7 показано, как это можно сделать, оперируя результатом метода tmpl.

Листинг 12-7: Обработка результатов, полученных из шаблона
<script type="text/javascript">
	$(document).ready(function () {
		var data = [
			{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99 },
			{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99 },
			{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99 },
			{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50 },
			{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12 },
			{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99 },
		];

		$('#flowerTmpl').tmpl(data)
			.slice(0, 3).appendTo('#row1').end().end().slice(3).appendTo("#row2");

	});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		<img src="${product}.png" />
		<label for="${product}">${name}:</label>
		<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
			value="0" required />
	</div>
</script>

В этом примере я использую методы slice и end, чтобы сузить и расширить выборку, и метод appendTo, чтобы добавить подмножества элементов, сгенерированных из шаблона, в разные ряды.

Обратите внимание, что мне пришлось вызвать метод end два раза подряд, чтобы проработать сужение выборки, вызванное методами slice и appendTo. Это очень функционально, и я вообще люблю использовать метод end, чтобы создавать команды в одно выражение, но мне не очень нравится последовательность end().end(). Вместо этого я обычно разделяю такие последовательности на отдельные команды, как показано в листинге 12-8.

Листинг 12-8: Разделение элементов с использованием нескольких выражений
var templResult = $('#flowerTmpl').tmpl(data);
templResult.slice(0, 3).appendTo('#row1');
templResult.slice(3).appendTo("#row2");

В любом случае вы получаете тот же результат, то есть продукция поделена по двум рядам, в каждом содержится три цветка, как показано на рисунке 12-3.

Рисунок 12-3: Настройка результатов для того, чтобы они подходили верстке

Корректировка ввода данных

Можно использовать и другой способ, чтобы скорректировать данные, переданные методу tmpl. В листинге 12-9 показано, как это можно сделать.

Листинг 12-9: Использование данных для корректировки результатов из шаблона
<script type="text/javascript">
	$(document).ready(function () {
		var data = [
			{ name: "Astor", product: "astor", stocklevel: "10", price: 2.99 },
			{ name: "Daffodil", product: "daffodil", stocklevel: "12", price: 1.99 },
			{ name: "Rose", product: "rose", stocklevel: "2", price: 4.99 },
			{ name: "Peony", product: "peony", stocklevel: "0", price: 1.50 },
			{ name: "Primula", product: "primula", stocklevel: "1", price: 3.12 },
			{ name: "Snowdrop", product: "snowdrop", stocklevel: "15", price: 0.99 },
		];

		var template = $('#flowerTmpl');
		template.tmpl(data.slice(0, 3)).appendTo("#row1");
		template.tmpl(data.slice(3)).appendTo("#row2");
	});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		<img src="${product}.png" />
		<label for="${product}">${name}:</label>
		<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
			value="0" required />
	</div>
</script>

В этом скрипте я решил задачу размещения цветов по рядам, используя шаблон дважды: по одному разу для каждого ряда. Я использовал метод slice, таким образом я смог передавать определенный набор объектов данных каждый раз шаблону. Техника отличается, но результат такой же, как и на рисунке 12-3.

Вычисление выражений

Мы не ограничены исключительно значениями свойств объектов данных. Между фигурными скобками можно разместить выражение JavaScript, а движок шаблона произведет вычисления и вставит результат, сделанный шаблоном, в HTML. В листинге 12-10 содержится пример.

Листинг 12-10: Вычисление выражения в шаблоне
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		<img src="${product}.png" />
		<label for="${product}">${name}:</label>
		<input name="${product}" data-price="${price}" data-stock="${stocklevel}"
			value="${stocklevel > 0 ? 1: 0}" required />
	</div>
</script>

В этом шаблоне я использую тройной оператор JavaScript, чтобы установить атрибут value элемента input, основываясь на свойстве stocklevel. Я размещаю это выражение между фигурными скобками, так же как я делал, когда напрямую вставлял значения свойств. Если свойство stocklevel больше нуля, тогда атрибут value будет установлено на 1, иначе оно будет равно 0. Результат можно увидеть на рисунке 12-4. Для всех цветов, кроме пиона, значение stocklevel больше нуля.

Рисунок 12-4: Вычисление выражения в шаблоне

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