x-modelable

x-modelable vous permet d'exposer un état Alpine comme cible de la directive x-model.

Voici un exemple simple d'utilisation de x-modelable pour exposer une variable afin de la lier avec x-model.

<div x-data="{ number: 5 }">
    <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
        <button @click="count++">Incrémenter</button>
    </div>

    Nombre : <span x-text="number"></span>
</div>

Comme vous pouvez le constater, la propriété « number » de la portée extérieure est désormais liée à la propriété « count » de la portée intérieure.

Cette fonctionnalité est généralement utilisée avec un moteur de gabarits côté serveur, comme Laravel Blade. Elle permet d'abstraire des composants Alpine dans des gabarits serveur et d'exposer leur état vers l'extérieur via x-model, comme s'il s'agissait d'un champ de saisie natif.

Valeurs prises en charge

x-modelable maintient indépendants son état interne et son état externe en clonant les valeurs au format JSON. Il est donc destiné à des états compatibles JSON : chaînes, nombres, booléens, null, tableaux et objets simples contenant ces valeurs.

Les objets du navigateur et les autres états qui ne peuvent pas être représentés en JSON ne traverseront pas cette frontière intacts. Par exemple, un File perd des propriétés comme son nom, sa taille et son type. La même limitation s'applique à des valeurs comme FileList, Map, Set, Date, aux instances de classes et aux nœuds du DOM.

Pour un champ personnalisé qui produit l'une de ces valeurs, omettez x-modelable et déclenchez plutôt un événement input. x-model lit alors la valeur directement depuis l'événement, sans la cloner :

<div x-data="{ files: [] }">
    <div x-model="files">
        <input
            type="file"
            multiple
            @change="$dispatch('input', Array.from($event.target.files))"
        >
    </div>

    <template x-for="file in files" :key="file.name">
        <p x-text="file.name"></p>
    </template>
</div>

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