Главная страница   /   12.6. Использование условий в шаблонах (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

12.6. Использование условий в шаблонах

Движок шаблона позволяет определить, основываясь на условии, какие части шаблона будут использоваться динамически. Это можно сделать, используя теги {{if}} и {{/if}}, как показано в листинге 12-17.

Листинг 12-17: Выбираем часть шаблона, основываясь на условии
<script type="text/javascript">
	$(document).ready(function () {
		var originalData = [
			{ 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 itemsPerRow = 3;
		var slicedData = [];
		for (var i = 0, j = 0; i < originalData.length; i += itemsPerRow, j++) {
			slicedData.push({
				rowid: "row" + j,
				flowers: originalData.slice(i, i + itemsPerRow)
			});
		}
		$('div.drow').remove();
		$('#rowTmpl').tmpl(slicedData).appendTo('div.dtable');
	});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	{{if stocklevel > 0}}
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}:</label>
			<input name="${product}" data-price="${price}"
				data-stock="${stocklevel}" value="${stocklevel}" required />
		</div>
	{{/if}}
</script>
<script id="rowTmpl" type="text/x-jquery-tmpl">
	<div id="${rowid}" class="drow">
		{{tmpl($data.flowers) '#flowerTmpl'}}
	</div>
</script>

Вы указываете условие в теге {{if}}, если условие имеет значение true, тогда будет использоваться часть шаблона до тега {{/if}}. Если же условие имеет значение false, тогда часть шаблона пропускается. В этом примере я проверяю значение свойства stocklevel, и если значение равно нулю, я пропускаю весь шаблон. Это обозначает, что в цветочном магазине отображается только та продукция, которая есть в наличии, как показано на рисунке 12-6.

Рисунок 12-6: Применение шаблона только к имеющимся в наличии единицам продукции

Можно создать более сложное условие, если добавить тег {{else}}, который позволяет определить участок шаблона, который будет использован, если условие, определенное тегом {{if}} имеет значение false. В листинге 12-18 представлен пример.

Листинг 12-18: Использование тега {{else}}
<script type="text/javascript">
	$(document).ready(function () {
		var originalData = [
			{ 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 itemsPerRow = 3;
		var slicedData = [];
		for (var i = 0, j = 0; i < originalData.length; i += itemsPerRow, j++) {
			slicedData.push({
				rowid: "row" + j,
				flowers: originalData.slice(i, i + itemsPerRow)
			});
		}
		$('div.drow').remove();
		$('#rowTmpl').tmpl(slicedData).appendTo('div.dtable');
	});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	{{if stocklevel > 0}}
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}:</label>
			<input name="${product}" data-price="${price}"
				data-stock="${stocklevel}" value="${stocklevel}" required />
		</div>
	{{else}}
		<div class="dcell">
			<img src="${product}.png" style="opacity: 0.5" />
			<span style="color: grey">${name} (No stock)</span>
		</div>
	{{/if}}
</script>
<script id="rowTmpl" type="text/x-jquery-tmpl">
	<div id="${rowid}" class="drow">
		{{tmpl($data.flowers) '#flowerTmpl'}}
	</div>
</script>

В этом примере я отображаю один набор элементов для продукции, которая имеется в наличии, и другой набор для продукции, которой в наличии нет. Вы можете пойти дальше и поставить условие в тег {{else}}, чтобы создать эквивалент условия else...if, как показано в листинге 12-19.

Листинг 12-19: Применение условия к тегу {{else}}
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	{{if stocklevel > 5}}
		<div class="dcell">
			<img src="${product}.png" />
			<label for="${product}">${name}:</label>
			<input name="${product}" data-price="${price}"
				data-stock="${stocklevel}" value="${stocklevel}" required />
		</div>
	{{else stocklevel > 0}}
		<div class="dcell">
			<img src="${product}.png" />
			<label style="color: red" for="${product}">${name}: (Low Stock)</label>
			<input name="${product}" data-price="${price}"
				data-stock="${stocklevel}" value="${stocklevel}" required />
		</div>
	{{else}}
		<div class="dcell">
			<img src="${product}.png" style="opacity: 0.5" />
			<span style="color: grey">${name} (No stock)</span>
		</div>
	{{/if}}
</script>

В этом скрипте я отображаю различные наборы элементов для продукции, которая имеется в наличии с минимум пятью единицами товара, а также продукции с меньшим числом имеющихся в наличии единиц товара, и для продукции, которой вообще нет на данный момент в продаже. Я сделал слабое различие между элементами, сгенерированными для каждого условия, но мы можем использовать это условие, чтобы создать совершенно разное содержание. И конечно же, по мере необходимости мы можем вызвать другие шаблоны. Результат выполнения скрипта можно увидеть на рисунке 12-7.

Рисунок 12-7: Использование в шаблоне условных выражений