Alpine.data()

Alpine.data(...) permet de réutiliser des contextes x-data dans votre application.

Voici par exemple un composant dropdown volontairement simple :

<div x-data="dropdown">
    <button @click="toggle">...</button>

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

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

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

Comme vous le voyez, nous avons extrait les propriétés et méthodes que l'on définit habituellement directement dans x-data vers un objet composant Alpine distinct.

Enregistrement depuis un bundle

Si vous avez choisi d'utiliser une étape de build pour votre code Alpine, vous devez enregistrer vos composants de la façon suivante :

import Alpine from 'alpinejs'
import dropdown from './dropdown.js'

Alpine.data('dropdown', dropdown)

Alpine.start()

Cela suppose que vous avez un fichier dropdown.js au contenu suivant :

export default () => ({
    open: false,

    toggle() {
        this.open = ! this.open
    }
})

Paramètres initiaux

En plus de référencer les fournisseurs Alpine.data simplement par leur nom (comme x-data="dropdown"), vous pouvez aussi les référencer comme des fonctions (x-data="dropdown()"). En les appelant directement comme des fonctions, vous pouvez passer des paramètres supplémentaires utilisés lors de la création de l'objet de données initial, comme ceci :

<div x-data="dropdown(true)">

Alpine.data('dropdown', (initialOpenState = false) => ({
    open: initialOpenState
}))

Vous pouvez maintenant réutiliser l'objet dropdown en lui fournissant des paramètres différents selon vos besoins.

Fonctions d'initialisation

Si votre composant contient une méthode init(), Alpine l'exécute automatiquement avant d'afficher le composant. Par exemple :

Alpine.data('dropdown', () => ({
    init() {
        // Ce code sera exécuté avant qu'Alpine
        // n'initialise le reste du composant.
    }
}))

Fonctions de destruction

Si votre composant contient une méthode destroy(), Alpine l'exécute automatiquement avant de nettoyer le composant.

Un cas typique est l'enregistrement d'un gestionnaire d'événements auprès d'une autre bibliothèque ou d'une API du navigateur non disponible via Alpine. Voyez l'exemple de code suivant pour utiliser la méthode destroy() afin de nettoyer un tel gestionnaire.

Alpine.data('timer', () => ({
    timer: null,
    counter: 0,
    init() {
      // Enregistre un gestionnaire qui référence l'instance du composant
      this.timer = setInterval(() => {
        console.log('Compteur incrémenté à', ++this.counter);
      }, 1000);
    },
    destroy() {
        // Détache le gestionnaire pour éviter les fuites de mémoire et d'effets de bord
        clearInterval(this.timer);
    },
}))

Un exemple où un composant est détruit est celui où il est utilisé à l'intérieur d'un x-if :

<span x-data="{ enabled: false }">
    <button @click.prevent="enabled = !enabled">Basculer</button>

    <template x-if="enabled">
        <span x-data="timer" x-text="counter"></span>
    </template>
</span>

Utiliser les propriétés magiques

Si vous voulez accéder à des méthodes ou propriétés magiques depuis un objet composant, vous pouvez le faire via le contexte this :

Alpine.data('dropdown', () => ({
    open: false,

    init() {
        this.$watch('open', () => {...})
    }
}))

Encapsuler des directives avec x-bind

Si vous souhaitez réutiliser plus que l'objet de données d'un composant, vous pouvez encapsuler des directives de template Alpine entières avec x-bind.

Voici un exemple qui extrait les détails de template de notre composant dropdown précédent avec x-bind :

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

    <div x-bind="dialogue"></div>
</div>

Alpine.data('dropdown', () => ({
    open: false,

    trigger: {
        ['@click']() {
            this.open = ! this.open
        },
    },

    dialogue: {
        ['x-show']() {
            return this.open
        },
    },
}))

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