K zamyšlení – Znovupoužitelné drobné šablonové „komponenty“
- GEpic
- Člen | 566
Latte je úžasný nástroj, který mi usnadňuje život už několik let. Díky za to, @DavidGrudl a ostatní.
Poslední dobou však přemýšlím nad používáním jednoduchých a
malých znovupoužitelných komponent. Jedná se hlavně o běžné UI elementy
typu .badge
, .btn
a podobně, ke kterým nemá smysl
tvořit klasické komponenty, jelikož neobsahují žádnou složitou logiku
(vyjma klasických latte maker a podobně).
V tuto chvíli řeším situaci následovně:
Definice „komponenty“:
{define badge, bool $show = true, string $title = '', $class = null}
<span class="badge ms-2 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
{block content}{/block}
</span>
{/define}
Použití komponenty:
{embed badge, $client !== null, 'Uhrazeno'}
{block content}
<i class="mdi mdi-check text-success"></i>
{$client->totalInvoicePricePaid|price:0}
{/block}
{/embed}
A funguje to skvěle. Ale umím si představit, že by to mohlo fungovat
jednodušeji. Jednoduše řečeno by nebyla při použití komponenty potřeba
definovat jakýkoliv {block}
, jelikož samotný obsah celého
{embed}
by byl vložen do {define}
.
Výsledný kód by mohl fungovat třeba následovně:
Definice komponenty
{define badge, bool $show = true, string $title = '', $class = null}
<span class="badge ms-2 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
{include child} {* Například takto? *}
</span>
{/define}
Použití komponenty:
{embed badge, $client !== null, 'Uhrazeno'}
<i class="mdi mdi-check text-success"></i>
{$client->totalInvoicePricePaid|price:0}
{/embed}
A pokud vás teď napadá, že se jedná ve finále o úsporu dvou řádků na jedno použití tak věřte, že ve složitějších šablonách je každý ušetřený řádek výhra a ve finále může být ušetřených řádků daleko víc.
Nebyla by podle mě třeba ani vytvářet nic nového. Současné
{define}
a {embed}
se mi líbí.
Nebo vás napadá, jak tuto situaci řešit v tuto chvíli tak, abych dosáhl požadovaného?
Díky všem a hezký den.
Editoval GEpic (9. 5. 16:02)
- Infanticide0
- Člen | 96
Takhle by se mi to taky líbilo, v Razoru je vnitřní obsah tagu
předáván jako proměnná childContent.
Pro {define} by to nemělo znamenat BC break, obsah mimo {block} se místo
ignoru předá v proměnné.
A fungovalo by to i takhle?
{embed badge, $client !== null, 'Uhrazeno'}
<i class="mdi mdi-check text-success"></i>
{$client->totalInvoicePricePaid|price:0}
{control "addToCart-$someid"}
<form n:name="bla">...</form>
{/embed}
- David Grudl
- Nette Core | 8192
To je něco jako https://forum.nette.org/…ymnim-blokem nebo https://github.com/…e/issues/304
- GEpic
- Člen | 566
Zkusil jsem se zamyslet nad variantou za využití n:maker
dle
/nette/latte/issues/304
zmíněného @DavidGrudl ale bojím se, že to nebude fungovat tak
efektivně.
Definice: (Varianta A)
Tato varianta může generovat nepřehledné definice hlavně v případě, že
bude povoleno použití parametrů na „root“ tagu.
<span n:define="badge, bool $show = true, string $title = '', $class = null" class="badge me-1 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
{include child}
</span>
Definice: (Varianta B)
Tato varianta může generovat nadbytečný HTML kód.
<span n:define="badge, bool $show = true, string $title = '', $class = null" >
<span class="badge me-1 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
{include child}
</span>
</span>
Použití: (Pro obě varianty)
<span n:embed="badge, $client !== null, 'Uhrazeno'">
<i class="mdi mdi-check text-success"></i>
{$client->totalInvoicePricePaid|price:0}
</span>
Využití {embed}
a {define}
generuje nejmenší
množství kódu na výstupu a parametry jednotlivých {define}
jsou dle mě také přehlednější.
Jinak ano, všechny zmíněné odkazy pojednávájí o stejné problematice.