Fixations Svelte

Comment travailler avec des liaisons dans Svelte

À l'aide de Svelte, vous pouvez créer une liaison bidirectionnelle entre les données et l'interface utilisateur.

De nombreux autres frameworks Web peuvent fournir des liaisons bidirectionnelles, c'est un modèle très courant.

Ils sont particulièrement utiles avec les formulaires.

bind: valeur

Commençons par la forme de liaison la plus courante que vous utiliserez souvent, que vous pouvez appliquer en utilisantbind:value. Vous prenez une variable de l'état du composant et vous la liez à un champ de formulaire:

<script>
let name = ''
</script>
<input bind:value={name}>

Maintenant sinamechange le champ de saisie mettra à jour sa valeur. Et l'inverse est également vrai: si le formulaire est mis à jour par l'utilisateur, lenameles changements de valeur de variable.

Sachez simplement que la variable doit être définie en utilisantlet/varet pasconst, sinon il ne peut pas être mis à jour par Svelte, carconstdéfinit une variable avec une valeur qui ne peut pas être réaffectée.

bind:valuefonctionne sur toutes les saveurs de champs de saisie (type="number",type="email"et ainsi de suite), mais cela fonctionne également pour d'autres types de champs, commetextareaetselect(plus surselectplus tard).

Cases à cocher et boutons radio

Cases à cocher et entrées radio (inputéléments avectype="checkbox"outype="radio") autorisent ces 3 liaisons:

bind:checked
bind:group
bind:indeterminate

bind:checkednous permet de lier une valeur à l'état vérifié de l'élément:

<script>
let isChecked
</script>
<input type=checkbox bind:checked={isChecked}>

bind:groupest pratique avec les cases à cocher et les entrées radio car celles-ci sont très souvent utilisées en groupe. Utilisantbind:groupvous pouvez associer un tableau JavaScript à une liste de cases à cocher et le remplir en fonction des choix effectués par l'utilisateur.

Voici un exemple. LegoodDogstableau se remplit en fonction des cases à cocher que je coche:

<script>
let goodDogs = []
let dogs = ['Roger', 'Syd']
</script>
<h2>
Who’s a good dog?
</h2>
<ul>
{#each dogs as dog}
<li>{dog} <input type=checkbox bind:group={goodDogs} value={dog}></li>
{/each}
</ul>
<h2>
Good dogs according to me:
</h2>
<ul>
{#each goodDogs as dog}
<li>{dog}</li>
{/each}
</ul>

Voir l'exemple surhttps://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

bind:indeterminatenous permet de nous lier auindeterminateétat d'un élément (si vous voulez en savoir plus, rendez-vous surhttps://css-tricks.com/indeterminate-checkboxes/)

Sélectionnez les champs

bind:valuefonctionne également pour leselectchamp de formulaire pour obtenir la valeur sélectionnée automatiquement affectée à la valeur d'une variable:

<script>
let selected
</script>
<select bind:value={selected}>
<option value=“1”>1</option>
<option value=“2”>2</option>
<option value=“3”>3</option>
</select>
{selected}

Ce qui est cool, c'est que si vous générez des options dynamiquement à partir d'un tableau d'objets, l'option sélectionnée est maintenant un objet et non une chaîne:

<script>
let selected
const goodDogs = [
{ name: ‘Roger’ },
{ name: ‘Syd’ }
]
</script>
<h2>List of possible good dogs:</h2>
<select bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>
{#if selected}
<h2>
Good dog selected: {selected.name}
</h2>
{/if}

Voir exemple:https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

selectpermet également lemultipleattribut:

<script>
let selected = []
const goodDogs = [
{ name: ‘Roger’ },
{ name: ‘Syd’ }
]
</script>
<h2>List of possible good dogs:</h2>
<select multiple bind:value={selected}>
{#each goodDogs as goodDog}
<option value={goodDog}>{goodDog.name}</option>
{/each}
</select>
{#if selected.length}
<h2>Good dog selected:</h2>
<ul>
{#each selected as dog}
<li>{dog.name}</li>
{/each}
</ul>
{/if}

Voir exemple:https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

Autres fixations

En fonction de la balise HTML sur laquelle vous travaillez, vous pouvez appliquer différents types de liaisons.

bind:filesest une liaison valable letype="file"éléments d'entrée pour lier la liste des fichiers sélectionnés.

LedetailsL'élément HTML permet l'utilisation debind:openpour lier sa valeur d'ouverture / fermeture.

LeaudioetvideoLes balises HTML multimédias vous permettent de lier plusieurs de leurs propriétés:currentTime,duration,paused,buffered,seekable,played,volume,playbackRate.

textContentetinnerHTMLpeut être liécontenteditabledes champs.

Toutes choses très utiles pour ces éléments HTML spécifiques.

Liaisons en lecture seule

offsetWidth,offsetHeight,clientWidth,clientHeightpeut être liélecture seulementsur n'importe quel élément HTML de niveau bloc, à l'exclusion des balises vides (commebr) et les éléments définis pour être en ligne (display: inline).

Obtenir une référence à l'élément HTML dans JavaScript

bind:thisest un type spécial de liaison qui vous permet d'obtenir une référence à un élément HTML et de le lier à une variable JavaScript:

<script>
let myInputField
</script>
<input bind:this={myInputField} />

Ceci est pratique lorsque vous devez appliquer une logique à des éléments après les avoir montés, par exemple en utilisantonMount()rappel d'événement de cycle de vie.

Accessoires de composants de reliure

Utilisantbind:vous pouvez lier une valeur à n'importe quel accessoire qu'un composant expose.

Dites que vous avez unCar.sveltecomposant:

<script>
export let inMovement = false
</script>
<button on:click={() => inMovement = true }>Start car</button>

Vous pouvez importer le composant et lier leinMovementsoutenir:

<script>
  import Car from './Car.svelte';
let carInMovement;
</script>
<Car bind:inMovement={carInMovement} />
{carInMovement}

Cela peut permettre des scénarios intéressants.

Téléchargez mon gratuitManuel de Svelte