Pro jQuery
Адам Фриман
Использование условий в шаблонах
Движок шаблона позволяет определить, основываясь на условии, какие части шаблона будут использоваться динамически. Это можно сделать, используя теги {{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: Использование в шаблоне условных выражений