Attributs HTML intelligents

Latte 3.1 arrive avec un ensemble d'améliorations qui se concentrent sur l'une des activités les plus courantes dans les templates : l'affichage des attributs HTML. Elles apportent plus de confort, de souplesse et de sécurité.

Attributs booléens

HTML utilise des attributs particuliers comme checked, disabled, selected ou hidden, dont la valeur exacte n'a pas d'importance : seule leur présence compte. Ce sont de simples drapeaux.

Latte les gère automatiquement. Vous pouvez passer n'importe quelle expression à l'attribut. Si elle est vraie, l'attribut est affiché. Si elle est fausse (par ex. false, null, 0 ou une chaîne vide), l'attribut est complètement omis.

Vous pouvez donc dire adieu aux conditions laborieuses et à n:attr, et écrire simplement :

<input type="text" disabled={$isDisabled} readonly={$isReadOnly}>

Si $isDisabled vaut false et $isReadOnly vaut true, le rendu est :

<input type="text" readonly>

Si vous avez besoin de ce comportement de bascule pour des attributs standard qui n'en bénéficient pas automatiquement (comme les attributs data- ou aria-), utilisez le filtre toggle.

Valeurs null

C'est l'un des changements les plus agréables. Auparavant, une variable valant null s'affichait comme une chaîne vide "". Cela conduisait souvent à des attributs vides dans le HTML, du type class="" ou title="".

Dans Latte 3.1, une nouvelle règle universelle s'applique : une valeur null signifie que l'attribut n'existe pas.

<div title="{$title}"></div>

Si $title vaut null, la sortie est <div></div>. S'il contient une chaîne, par exemple “Hello”, la sortie est <div title="Hello"></div>. Vous n'avez donc plus besoin d'envelopper les attributs dans des conditions. Cette règle s'applique lorsque toute la valeur de l'attribut est une seule expression {...} ; dans une valeur mixte comme title="foo {$bar}", un null est rendu comme une chaîne vide.

Si vous utilisez des filtres, gardez à l'esprit qu'ils convertissent généralement null en chaîne (souvent vide). Pour l'éviter, utilisez le filtre nullsafe ?| :

<div title="{$title?|upper}"></div>

Classes

Vous pouvez passer un tableau à l'attribut class. C'est parfait pour les classes conditionnelles : si le tableau est associatif, les clés servent de noms de classes et les valeurs de conditions. La classe n'est rendue que si la condition est vraie.

<button class={[
	btn,
	btn-primary,
	active => $isActive,
]}>Press me</button>

Si $isActive est vrai, le rendu est :

<button class="btn btn-primary active">Press me</button>

Ce comportement ne se limite pas à class. Il vaut pour un ensemble choisi d'attributs qui attendent une liste de valeurs séparées par des espaces : accesskey, class, headers, itemprop, ping, rel, role, sandbox et tous les attributs aria-*. Pour tout autre attribut, passer un tableau déclenche un avertissement et la valeur est abandonnée.

<a rel={[nofollow, noopener, external => $isExternal]}>link</a>

Styles

L'attribut style accepte lui aussi les tableaux. C'est particulièrement pratique pour les styles conditionnels. Si un élément du tableau comporte une clé (propriété CSS) et une valeur, la propriété est omise lorsque la valeur vaut null, false, 0 ou une chaîne vide ; ainsi, opacity => 0 n'est pas rendu.

<div style={[
	background => lightblue,
	display => $isVisible ? block : null,
	font-size => '16px',
]}></div>

Si $isVisible est faux, le rendu est :

<div style="background: lightblue; font-size: 16px"></div>

Attributs data

Nous avons souvent besoin de passer au HTML une configuration destinée à JavaScript. Cela se faisait auparavant via json_encode. Vous pouvez désormais passer simplement un tableau ou un objet stdClass à un attribut data-, et Latte le sérialisera en JSON :

<div data-config={[ theme: dark, version: 2 ]}></div>

Sortie :

<div data-config='{"theme":"dark","version":2}'></div>

De plus, true et false sont rendus comme les chaînes "true" et "false" (c'est-à-dire du JSON valide).

Attributs aria

La spécification WAI-ARIA exige les valeurs textuelles "true" et "false" pour les valeurs booléennes. Latte s'en charge automatiquement pour les attributs aria- :

<button aria-expanded={=true} aria-checked={=false}></button>

Sortie :

<button aria-expanded="true" aria-checked="false"></button>

Comme class, les attributs aria- acceptent également un tableau. Il est traité comme une liste séparée par des espaces : les valeurs simples sont reprises telles quelles, et une clé n'est incluse que si sa valeur vaut true :

<span aria-labelledby={[title, description => $hasDescription]}></span>

Contrôle des types

Avez-vous déjà vu <input value="Array"> dans votre HTML généré ? C'est un bug classique qui passe souvent inaperçu. Latte introduit un contrôle strict des types pour les attributs HTML, afin de rendre vos templates plus résistants à ce genre d'étourderie.

Latte sait quel attribut est de quelle nature et quelles valeurs il attend :

  • Les attributs standard (comme href, id, value, placeholder…) attendent une valeur affichable sous forme de texte : chaînes, nombres ou objets convertibles en chaîne. null est accepté également (il supprime l'attribut). En revanche, si vous passez par mégarde un tableau, un booléen ou un objet quelconque, Latte déclenche un avertissement et ignore intelligemment la valeur invalide.
  • Les attributs booléens (comme checked, disabled…) acceptent n'importe quel type, puisque leur présence dépend d'une logique vrai/faux.
  • Les attributs intelligents (comme class, style, data-…) traitent spécifiquement les tableaux comme des entrées valides.

Ce contrôle garantit que votre application ne produit pas de HTML inattendu.

Migration depuis Latte 3.0

Comme le comportement de null (il affichait "", il supprime désormais l'attribut) et celui des attributs data- (les booléens affichaient "1"/"", désormais "true"/"false") ont changé, vous devrez peut-être adapter vos templates.

Pour une transition en douceur, Latte propose un mode de migration qui met en évidence les différences. Lisez le guide détaillé Migration de Latte 3.0 vers 3.1.

version: 3.x