x-data

Tout, dans Alpine, commence par la directive x-data.

x-data définit un morceau de HTML comme un composant Alpine et fournit les données réactives auxquelles ce composant peut faire référence.

Voici un exemple de composant de menu déroulant volontairement simplifié :

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

    <div x-show="open">
        Contenu...
    </div>
</div>

Ne vous préoccupez pas des autres directives de cet exemple (@click et x-show), nous y viendrons bientôt. Pour l'instant, concentrons-nous sur x-data.

Portée

Les propriétés définies dans une directive x-data sont disponibles pour tous les éléments enfants, y compris ceux situés dans d'autres composants x-data imbriqués.

Par exemple :

<div x-data="{ foo: 'bar' }">
    <span x-text="foo"><!-- Affichera : "bar" --></span>

    <div x-data="{ bar: 'baz' }">
        <span x-text="foo"><!-- Affichera : "bar" --></span>

        <div x-data="{ foo: 'bob' }">
            <span x-text="foo"><!-- Affichera : "bob" --></span>
        </div>
    </div>
</div>

Méthodes

Comme x-data est évalué comme un objet JavaScript ordinaire, vous pouvez y stocker non seulement de l'état, mais aussi des méthodes et même des accesseurs (getters).

Par exemple, extrayons le comportement « Afficher/masquer le contenu » dans une méthode de x-data.

<div x-data="{ open: false, toggle() { this.open = ! this.open } }">
    <button @click="toggle()">Afficher/masquer le contenu</button>

    <div x-show="open">
        Contenu...
    </div>
</div>

Remarquez la méthode toggle() { this.open = ! this.open } ajoutée à x-data. Cette méthode peut désormais être appelée depuis n'importe où à l'intérieur du composant.

Vous remarquerez aussi l'usage de this. pour accéder à l'état de l'objet lui-même. C'est parce qu'Alpine évalue cet objet de données comme n'importe quel objet JavaScript standard, avec un contexte this.

Si vous préférez, vous pouvez même omettre complètement les parenthèses d'appel de la méthode toggle. Par exemple :

<!-- Avant -->
<button @click="toggle()">...</button>

<!-- Après -->
<button @click="toggle">...</button>

Accesseurs (getters)

Les accesseurs JavaScript sont pratiques lorsque l'unique rôle d'une méthode est de retourner une donnée calculée à partir d'un autre état.

Considérez-les comme des « propriétés calculées » (même si, contrairement aux propriétés calculées de Vue, elles ne sont pas mises en cache).

Refactorisons notre composant pour utiliser un accesseur nommé isOpen au lieu d'accéder directement à open.

<div x-data="{
    open: false,
    get isOpen() { return this.open },
    toggle() { this.open = ! this.open },
}">
    <button @click="toggle()">Afficher/masquer le contenu</button>

    <div x-show="isOpen">
        Contenu...
    </div>
</div>

Remarquez que le « Contenu » dépend désormais de l'accesseur isOpen plutôt que directement de la propriété open.

Dans ce cas, il n'y a aucun avantage concret. Mais dans certains cas, les accesseurs permettent d'obtenir une syntaxe plus expressive dans vos composants.

Composants sans données

Il arrive que vous souhaitiez créer un composant Alpine sans avoir besoin de données.

Dans ce cas, vous pouvez toujours passer un objet vide.

<div x-data="{}">

Si vous le souhaitez, vous pouvez aussi supprimer entièrement la valeur de l'attribut, si cela vous paraît plus lisible.

<div x-data>

Composants d'un seul élément

Il peut arriver que votre composant Alpine ne contienne qu'un seul élément, comme ci-dessous :

<div x-data="{ open: true }">
    <button @click="open = false" x-show="open">Masquez-moi</button>
</div>

Dans ce cas, vous pouvez déclarer x-data directement sur cet unique élément :

<button x-data="{ open: true }" @click="open = false" x-show="open">
    Masquez-moi
</button>

Données réutilisables

Si vous vous surprenez à dupliquer le contenu de x-data, ou si vous trouvez la syntaxe en ligne trop verbeuse, vous pouvez extraire l'objet x-data dans un composant dédié grâce à Alpine.data.

Voici un exemple rapide :

<div x-data="dropdown">
    <button @click="toggle">Afficher/masquer le contenu</button>

    <div x-show="open">
        Contenu...
    </div>
</div>

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

            toggle() {
                this.open = ! this.open
            },
        }))
    })
</script>

→ En savoir plus sur Alpine.data(...)

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