x-bind

x-bind vous permet de définir des attributs HTML sur des éléments en fonction du résultat d'expressions JavaScript.

Par exemple, voici un composant dans lequel nous utilisons x-bind pour définir la valeur du placeholder d'un champ de saisie.

<div x-data="{ placeholderText: 'Saisissez ici...' }">
    <input type="text" x-bind:placeholder="placeholderText">
</div>

Syntaxe abrégée

Si x-bind: vous paraît trop verbeux, vous pouvez utiliser la syntaxe abrégée : :. Par exemple, voici le même champ de saisie que ci-dessus, réécrit avec la syntaxe abrégée.

<input type="text" :placeholder="placeholderText">

Remarque : bien que cela ne figure pas dans l'extrait ci-dessus, x-bind ne peut pas être utilisé si aucun élément parent ne définit x-data. → En savoir plus sur x-data

Lier des classes

x-bind est le plus souvent utile pour définir des classes spécifiques sur un élément en fonction de l'état d'Alpine.

Voici un exemple simple de menu déroulant : au lieu d'utiliser x-show, nous utilisons une classe « hidden » pour afficher ou masquer un élément.

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Afficher/masquer le menu</button>

    <div :class="open ? '' : 'hidden'">
        Contenu du menu...
    </div>
</div>

Désormais, lorsque open vaut false, la classe « hidden » sera ajoutée au menu déroulant.

Conditions abrégées

Dans ce genre de cas, si vous préférez une syntaxe moins verbeuse, vous pouvez utiliser l'évaluation en court-circuit de JavaScript à la place des conditions classiques :

<div :class="show ? '' : 'hidden'">
<!-- Équivaut à : -->
<div :class="show || 'hidden'">

L'inverse est également possible. Supposons qu'à la place de open, nous utilisions une variable de valeur opposée : closed.

<div :class="closed ? 'hidden' : ''">
<!-- Équivaut à : -->
<div :class="closed && 'hidden'">

Syntaxe objet pour les classes

Alpine propose une syntaxe supplémentaire pour activer ou désactiver des classes, si vous la préférez. En passant un objet JavaScript dont les clés sont les classes et les valeurs des booléens, Alpine sait quelles classes appliquer et lesquelles retirer. Par exemple :

<div :class="{ 'hidden': ! show }">

Cette technique présente un avantage unique par rapport aux autres méthodes. Avec la syntaxe objet, Alpine ne conserve PAS les classes d'origine présentes dans l'attribut class de l'élément.

Par exemple, si vous voulez appliquer la classe « hidden » à un élément avant le chargement d'Alpine, ET utiliser Alpine pour l'ajouter ou la retirer, vous ne pouvez y parvenir qu'avec la syntaxe objet :

<div class="hidden" :class="{ 'hidden': ! show }">

Si cela vous a semblé confus, voyons plus en détail en quoi Alpine traite x-bind:class différemment des autres attributs.

Comportement particulier

x-bind:class se comporte différemment des autres attributs en coulisses.

Prenons le cas suivant.

<div class="opacity-50" :class="hide && 'hidden'">

Si « class » était un attribut ordinaire, la liaison :class écraserait l'attribut class existant, et opacity-50 serait remplacé par hidden ou par ''.

Alpine traite cependant les liaisons de class de façon spécifique : il est assez malin pour conserver les classes déjà présentes sur l'élément.

Par exemple, si hide vaut true, l'exemple ci-dessus produira l'élément DOM suivant :

<div class="opacity-50 hidden">

Si hide vaut false, l'élément DOM ressemblera à ceci :

<div class="opacity-50">

Ce comportement devrait passer inaperçu et paraître intuitif à la plupart des utilisateurs, mais il mérite d'être mentionné explicitement pour les développeurs curieux ou pour d'éventuels cas particuliers.

Lier des styles

À l'image de la syntaxe spéciale permettant de lier des classes avec des objets JavaScript, Alpine propose aussi une syntaxe à base d'objets pour lier les attributs style.

Comme pour les objets de classes, cette syntaxe est entièrement facultative. Ne l'utilisez que si elle vous apporte un avantage.

<div :style="{ color: 'red', display: 'flex' }">

<!-- Produira : -->
<div style="color: red; display: flex;" ...>

Le style en ligne conditionnel est possible au moyen d'expressions, exactement comme avec x-bind:class. Les opérateurs de court-circuit peuvent aussi être utilisés, en plaçant un objet de styles comme second opérande.

<div x-bind:style="true && { color: 'red' }">

<!-- Produira : -->
<div style="color: red;">

Un avantage de cette approche est de pouvoir la combiner avec des styles déjà présents sur l'élément :

<div style="padding: 1rem;" :style="{ color: 'red', display: 'flex' }">

<!-- Produira : -->
<div style="padding: 1rem; color: red; display: flex;" ...>

Et comme la plupart des expressions d'Alpine, vous pouvez toujours utiliser le résultat d'une expression JavaScript comme référence :

<div x-data="{ styles: { color: 'red', display: 'flex' }}">
    <div :style="styles">
</div>

<!-- Produira : -->
<div ...>
    <div style="color: red; display: flex;" ...>
</div>

Lier directement des directives Alpine

x-bind vous permet de lier à un élément un objet contenant différentes directives et différents attributs.

Les clés de l'objet peuvent être tout ce que vous écririez normalement comme nom d'attribut dans Alpine. Cela comprend les directives Alpine et leurs modificateurs, mais aussi les attributs HTML classiques. Les valeurs de l'objet sont soit de simples chaînes de caractères, soit, pour les directives dynamiques d'Alpine, des fonctions de rappel (callbacks) évaluées par Alpine.

<div x-data="dropdown">
    <button x-bind="trigger">Ouvrir le menu</button>

    <span x-bind="dialogue">Contenu du menu</span>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            trigger: {
                ['x-ref']: 'trigger',
                ['@click']() {
                    this.open = true
                },
            },

            dialogue: {
                ['x-show']() {
                    return this.open
                },
                ['@click.outside']() {
                    this.open = false
                },
            },
        }))
    })
</script>

Cet usage de x-bind comporte quelques précautions à connaître :

Remarque : lorsque la directive « liée » ou « appliquée » est x-for, vous devez retourner une chaîne d'expression normale depuis la fonction de rappel. Par exemple : ['x-for']() { return 'item in items' }

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