$id

$id est une propriété magique qui permet de générer l'identifiant d'un élément en garantissant qu'il n'entrera pas en conflit avec d'autres identifiants de même nom dans la même page.

Cet utilitaire est extrêmement utile pour construire des composants réutilisables (probablement dans un template back-end) qui peuvent apparaître plusieurs fois dans une page et qui utilisent des attributs ID.

Les champs de saisie, fenêtres modales, listes de choix, etc. en bénéficieront tous.

Utilisation de base

Supposons que vous ayez deux champs de saisie dans une page et que vous vouliez qu'ils aient chacun un identifiant unique. Vous pouvez faire ceci :

<input type="text" :id="$id('text-input')">
<!-- id="text-input-1" -->

<input type="text" :id="$id('text-input')">
<!-- id="text-input-2" -->

Comme vous le voyez, $id prend une chaîne et produit un suffixe ajouté qui est unique dans la page.

Regrouper avec x-id

Imaginons maintenant que vous vouliez ces deux mêmes champs, mais avec cette fois un élément <label> pour chacun.

Cela pose un problème : vous devez pouvoir référencer le même identifiant deux fois. Une fois pour l'attribut for du <label>, et une autre pour l'id du champ.

Voici une façon d'y parvenir qui vous viendrait peut-être à l'esprit, et qui est tout à fait valide :

<div x-data="{ id: $id('text-input') }">
    <label :for="id"> <!-- "text-input-1" -->
    <input type="text" :id="id"> <!-- "text-input-1" -->
</div>

<div x-data="{ id: $id('text-input') }">
    <label :for="id"> <!-- "text-input-2" -->
    <input type="text" :id="id"> <!-- "text-input-2" -->
</div>

Cette approche convient, mais devoir nommer et stocker l'identifiant dans la portée de votre composant est fastidieux.

Pour accomplir la même chose de façon plus souple, vous pouvez utiliser la directive x-id d'Alpine afin de déclarer une « portée d'identifiants » pour un ensemble d'ID :

<div x-id="['text-input']">
    <label :for="$id('text-input')"> <!-- "text-input-1" -->
    <input type="text" :id="$id('text-input')"> <!-- "text-input-1" -->
</div>

<div x-id="['text-input']">
    <label :for="$id('text-input')"> <!-- "text-input-2" -->
    <input type="text" :id="$id('text-input')"> <!-- "text-input-2" -->
</div>

Comme vous le voyez, x-id accepte un tableau de noms d'identifiants. Désormais, tous les usages de $id() à l'intérieur de cette portée utiliseront le même identifiant. Considérez-les comme des « groupes d'identifiants ».

Imbrication

Comme vous l'avez sans doute deviné, vous pouvez imbriquer librement ces groupes x-id, comme ceci :

<div x-id="['text-input']">
    <label :for="$id('text-input')"> <!-- "text-input-1" -->
    <input type="text" :id="$id('text-input')"> <!-- "text-input-1" -->

    <div x-id="['text-input']">
        <label :for="$id('text-input')"> <!-- "text-input-2" -->
        <input type="text" :id="$id('text-input')"> <!-- "text-input-2" -->
    </div>
</div>

Identifiants à clé (pour les boucles)

Il est parfois utile d'ajouter un suffixe supplémentaire à la fin d'un identifiant afin de l'identifier au sein d'une boucle.

Pour cela, $id() accepte un second paramètre facultatif qui sera ajouté comme suffixe à la fin de l'identifiant généré.

Un exemple courant est un composant de liste de choix qui utilise l'attribut aria-activedescendant pour indiquer aux technologies d'assistance quel élément est « actif » dans la liste :

<ul
    x-id="['list-item']"
    :aria-activedescendant="$id('list-item', activeItem.id)"
>
    <template x-for="item in items" :key="item.id">
        <li :id="$id('list-item', item.id)">...</li>
    </template>
</ul>

Cet exemple de liste de choix est incomplet, mais il illustre bien un scénario où chaque identifiant d'un groupe doit rester unique dans la page, tout en étant associé à une clé dans une boucle pour que vous puissiez référencer chaque identifiant individuellement au sein du groupe.

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev