Syntax¶
Šablony používají syntax Twig (http://twig.sensiolabs.org/), kterou dále rozšiřují o specifické funkce. Tato dokumentace obsahuje pouze tyto nadstavbové funkce a doporučujeme nejprve se seznámit se základní syntaxí Twig: http://twig.sensiolabs.org/doc/templates.html
Validita šablon¶
Všechny šablony prochází zpracováním DOM parseru, takže musí být validní. Není možné křížit tagy a všechny tagy otevřené v jednom souboru by měly být ve stejném souboru i uzavřeny. Zpracování šablon respektuje HTML5 specifikaci, takže není potřeba uzavírat tagy IMG, INPUT, BR, HR a podobně.
Důsledkem parsování šablon může být neočekávané chování - například v případě použití DIV uvnitř P
{# zápis v šabloně #}
<p> Hello!
<div>Hi!</div>
</p>
Skutečný výstup:
<p> Hello!</p>
<div>Hi!</div>
Podle HTML5 specifikace DIV nemůže být uvnitř odstavce, takže je odstavec ukončen, jakmile narazí na DIV.
Následující zápisy nelze v šablonách použít
<input {%if x%}checked{%endif%}> {# nevalidní tag #}
<img src="{{iUrl("Objednavka/Kosik")}}"> {# chybné uvozovky - ve twigu stačí použít apostrof #}
Struktura šablony¶
Některé zápisy sice projdou validací, ale není doporučené je používat. Například tento zápis je sice validní, ale jeho použití může způsobit problémy.
{# chybný zápis #}
{%if user %}
<div class="user">
{%endif%}
{%include this.template %}
{%if user %}
</div>
{%endif%}
Doporučený způsob zápisu:
{# správný zápis #}
{%if user %}
<div class="user">
{%include this.template %}
</div>
{%else%}
{%include this.template %}
{%endif%}
Pokud je potřeba mít různou strukturu dle podmínek, je nejpraktičtější mít definici celé struktury na jednom místě. Například v jednom souboru mít pouze podmínky a kód šablony rozdělit na makra/soubory. Výsledný kód je výrazně přehlednější a zároveň nejsou problémy při zpracování šablony.
Podmíněné atributy¶
Použitím prefixu if: lze podmínit vypsání atributu. Hodnotou atributu je twig kód (bez {{}}), který může obsahovat buď jenom podmínku (pro použití u checked, selected, …) nebo podmínku a hodnotu.
<input if:checked="1==1"> {# výstup: <input checked> #}
<input if:checked="1==2"> {# výstup: <input> #}
<div if:class="1==1 ? 'main'"> {# výstup: <div class="main"> #}
<div if:class="1==2 ? 'main'"> {# výstup: <div> #}