Atributos HTML inteligentes
Latte 3.1 llega con un conjunto de mejoras centradas en una de las actividades más habituales en las plantillas: imprimir atributos HTML. Aporta más comodidad, flexibilidad y seguridad.
Atributos booleanos
HTML usa atributos especiales como checked, disabled, selected o hidden, en
los que el valor concreto es irrelevante: solo importa su presencia. Funcionan como simples banderas.
Latte los gestiona automáticamente. Puede pasar al atributo cualquier expresión. Si es verdadera, el atributo se renderiza.
Si es falsa (por ejemplo false, null, 0 o una cadena vacía), el atributo se omite por
completo.
Esto significa que puede despedirse de las incómodas condiciones o de n:attr y usar simplemente:
<input type="text" disabled={$isDisabled} readonly={$isReadOnly}>
Si $isDisabled es false y $isReadOnly es true, se renderiza:
<input type="text" readonly>
Si necesita este comportamiento de conmutación en atributos estándar que no tienen esta gestión automática (como los
atributos data- o aria-), use el filtro toggle.
Valores null
Este es uno de los cambios más agradables. Antes, si una variable era null, se imprimía como cadena vacía
"". Esto llevaba a menudo a atributos vacíos en el HTML, como class="" o title="".
En Latte 3.1 rige una nueva regla universal: un valor null significa que el atributo no existe.
<div title="{$title}"></div>
Si $title es null, la salida es <div></div>. Si contiene una cadena, por
ejemplo „Hola“, la salida es <div title="Hola"></div>. Gracias a esto no tiene que envolver los
atributos en condiciones. Esta regla se aplica cuando todo el valor del atributo es una única expresión {...}; en
un valor mixto como title="foo {$bar}", un null se renderiza como cadena vacía.
Si usa filtros, tenga en cuenta que normalmente convierten null en una cadena (por ejemplo, en cadena vacía).
Para evitarlo, use el filtro nullsafe ?|:
<div title="{$title?|upper}"></div>
Clases
Al atributo class puede pasarle un array. Esto va de maravilla para las clases condicionales: si el array es
asociativo, las claves se usan como nombres de clase y los valores como condiciones. La clase se renderiza solo si la condición
es verdadera.
<button class={[
btn,
btn-primary,
active => $isActive,
]}>Press me</button>
Si $isActive es verdadero, se renderiza:
<button class="btn btn-primary active">Press me</button>
Este comportamiento no se limita a class. Funciona para un conjunto elegido de atributos que esperan una lista de
valores separados por espacios: accesskey, class, headers, itemprop,
ping, rel, role, sandbox y todos los atributos aria-*. En
cualquier otro atributo, pasar un array provoca una advertencia y el valor se descarta.
<a rel={[nofollow, noopener, external => $isExternal]}>link</a>
Estilos
El atributo style también admite arrays. Resulta especialmente útil para los estilos condicionales. Si un
elemento del array contiene una clave (propiedad CSS) y un valor, la propiedad se omite cuando el valor es null,
false, 0 o una cadena vacía, de modo que, por ejemplo, opacity => 0 no se
renderiza.
<div style={[
background => lightblue,
display => $isVisible ? block : null,
font-size => '16px',
]}></div>
Si $isVisible es falso, se renderiza:
<div style="background: lightblue; font-size: 16px"></div>
Atributos data
A menudo necesitamos pasar al HTML la configuración para JavaScript. Antes se hacía con json_encode. Ahora
basta con pasar un array o un objeto stdClass a un atributo data- y Latte lo serializará a JSON:
<div data-config={[ theme: dark, version: 2 ]}></div>
Imprime:
<div data-config='{"theme":"dark","version":2}'></div>
Además, true y false se renderizan como las cadenas "true" y "false" (es
decir, JSON válido).
Atributos aria
La especificación WAI-ARIA exige los valores textuales "true" y "false" para los valores booleanos.
Latte se encarga de ello automáticamente en los atributos aria-:
<button aria-expanded={=true} aria-checked={=false}></button>
Imprime:
<button aria-expanded="true" aria-checked="false"></button>
Igual que class, los atributos aria- también aceptan un array. Se trata como una lista separada por
espacios: los valores simples se usan tal cual y una clave se incluye solo cuando su valor es true:
<span aria-labelledby={[title, description => $hasDescription]}></span>
Comprobación de tipos
¿Ha visto alguna vez <input value="Array"> en su HTML generado? Es un fallo clásico que suele pasar
desapercibido. Latte introduce una comprobación estricta de tipos para los atributos HTML, para hacer sus plantillas más
resistentes a estos descuidos.
Latte sabe qué atributo es cuál y qué valores espera:
- Los atributos estándar (como
href,id,value,placeholder…) esperan un valor que pueda renderizarse como texto. Esto incluye cadenas, números u objetos convertibles a cadena. También se aceptanull(descarta el atributo). Ahora bien, si pasa por error un array, un booleano o un objeto genérico, Latte emite una advertencia e ignora inteligentemente el valor no válido. - Los atributos booleanos (como
checked,disabled…) aceptan cualquier tipo, ya que su presencia se decide por la lógica verdadero/falso. - Los atributos inteligentes (como
class,style,data-…) tratan específicamente los arrays como entradas válidas.
Esta comprobación garantiza que su aplicación no produzca HTML inesperado.
Migración desde Latte 3.0
Como ha cambiado el comportamiento de null (antes imprimía "", ahora descarta el atributo) y el de
los atributos data- (antes los booleanos imprimían "1"/"", ahora
"true"/"false"), es posible que necesite actualizar sus plantillas.
Para una transición cómoda, Latte ofrece un modo de migración que resalta las diferencias. Lea la guía detallada Migración de Latte 3.0 a 3.1.
