Attributi HTML intelligenti
Latte 3.1 porta una serie di migliorie dedicate a una delle attività più comuni nei template: la stampa degli attributi HTML. Il risultato è più comodità, più flessibilità e più sicurezza.
Attributi booleani
L'HTML usa attributi speciali come checked, disabled, selected o hidden,
per i quali il valore concreto è irrilevante: conta solo la loro presenza. Funzionano come semplici flag.
Latte li gestisce automaticamente. All'attributo potete passare qualsiasi espressione. Se il suo valore è vero, l'attributo
viene stampato. Se è falso (per esempio false, null, 0 o una stringa vuota), l'attributo
viene omesso del tutto.
Questo significa che potete dire addio a condizioni macchinose o a n:attr e scrivere semplicemente:
<input type="text" disabled={$isDisabled} readonly={$isReadOnly}>
Se $isDisabled è false e $isReadOnly è true, il risultato è:
<input type="text" readonly>
Se avete bisogno di questo comportamento per attributi comuni che non godono della gestione automatica (come gli attributi
data- o aria-), usate il filtro toggle.
Valori null
Questo è uno dei cambiamenti più gradevoli. In precedenza, se una variabile era null, veniva stampata come
stringa vuota "". Ne derivavano spesso attributi vuoti nell'HTML, come class="" o
title="".
In Latte 3.1 vale una nuova regola universale: il valore null significa che l'attributo non esiste.
<div title="{$title}"></div>
Se $title è null, il risultato è <div></div>. Se contiene una stringa, per
esempio „Ciao“, il risultato è <div title="Ciao"></div>. Grazie a questo non dovete racchiudere gli
attributi in condizioni. La regola vale quando l'intero valore dell'attributo è una singola espressione {...}; in un
valore misto come title="foo {$bar}" un null viene stampato come stringa vuota.
Se usate dei filtri, tenete presente che di solito convertono null in stringa (per esempio in una stringa vuota).
Per evitarlo, usate il filtro nullsafe ?|:
<div title="{$title?|upper}"></div>
Classi
All'attributo class potete passare un array. È perfetto per le classi condizionali: se l'array è associativo, le
chiavi vengono usate come nomi delle classi e i valori come condizioni. La classe viene stampata solo se la condizione
è vera.
<button class={[
btn,
btn-primary,
active => $isActive,
]}>Premi qui</button>
Se $isActive è vero, il risultato è:
<button class="btn btn-primary active">Premi qui</button>
Questo comportamento non è limitato a class. Vale per un insieme scelto di attributi che si aspettano un elenco
di valori separati da spazi: accesskey, class, headers, itemprop,
ping, rel, role, sandbox e tutti gli attributi aria-*. Per
qualsiasi altro attributo, passare un array provoca un avviso e il valore viene scartato.
<a rel={[nofollow, noopener, external => $isExternal]}>link</a>
Stili
Anche l'attributo style supporta gli array. È particolarmente utile per gli stili condizionali. Se un elemento
dell'array ha una chiave (la proprietà CSS) e un valore, la proprietà viene omessa quando il valore è null,
false, 0 o una stringa vuota, quindi per esempio opacity => 0 non viene stampato.
<div style={[
background => lightblue,
display => $isVisible ? block : null,
font-size => '16px',
]}></div>
Se $isVisible è falso, il risultato è:
<div style="background: lightblue; font-size: 16px"></div>
Attributi data
Spesso abbiamo bisogno di passare all'HTML la configurazione per JavaScript. In precedenza lo si faceva con
json_encode. Ora potete semplicemente passare un array o un oggetto stdClass a un attributo data- e
Latte lo serializzerà in JSON:
<div data-config={[ theme: dark, version: 2 ]}></div>
Stampa:
<div data-config='{"theme":"dark","version":2}'></div>
Inoltre true e false vengono stampati come le stringhe "true" e "false"
(cioè JSON valido).
Attributi aria
La specifica WAI-ARIA richiede i valori testuali "true" e "false" per i valori booleani. Latte se
ne occupa automaticamente per gli attributi aria-:
<button aria-expanded={=true} aria-checked={=false}></button>
Stampa:
<button aria-expanded="true" aria-checked="false"></button>
Come class, anche gli attributi aria- accettano un array. Viene trattato come un elenco separato da
spazi: i valori semplici sono usati così come sono, mentre una chiave viene inclusa solo se il suo valore è
true:
<span aria-labelledby={[title, description => $hasDescription]}></span>
Controllo dei tipi
Vi è mai capitato di vedere <input value="Array"> nell'HTML generato? È un errore classico che spesso
passa inosservato. Latte introduce un controllo rigoroso dei tipi degli attributi HTML per rendere i vostri template più
resistenti a sviste di questo genere.
Latte sa quali attributi sono di quale tipo e quali valori si aspettano:
- Gli attributi comuni (come
href,id,value,placeholder…) si aspettano un valore stampabile come testo. Rientrano qui le stringhe, i numeri o gli oggetti convertibili in stringa. È accettato anchenull(che elimina l'attributo). Se però passate per errore un array, un booleano o un oggetto generico, Latte emette un avviso e ignora in modo intelligente il valore non valido. - Gli attributi booleani (come
checked,disabled…) accettano qualsiasi tipo, perché la loro presenza è decisa dalla logica vero/falso. - Gli attributi intelligenti (come
class,style,data-…) trattano espressamente gli array come input validi.
Questo controllo garantisce che la vostra applicazione non produca HTML inatteso.
Migrazione da Latte 3.0
Poiché il comportamento di null (prima stampava "", ora elimina l'attributo) e degli attributi
data- (i booleani prima stampavano "1"/"", ora "true"/"false")
è cambiato, potrebbe essere necessario aggiornare i vostri template.
Per una transizione morbida Latte offre una modalità di migrazione che evidenzia le differenze. Leggete la guida dettagliata Migrazione da Latte 3.0 a 3.1.
