Fijaciones Svelte

Cómo trabajar con enlaces en Svelte

Usando Svelte puedes crear un enlace bidireccional entre los datos y la interfaz de usuario.

Muchos otros marcos web pueden proporcionar enlaces bidireccionales, es un patrón muy común.

Son especialmente útiles con formularios.

enlazar:valor

Comenzamos con la forma de enlace más común que usarás a menudo, que puedes aplicar usando bind:value. Tomas una variable del estado del componente y la vinculas a un campo de formulario:

scriptlet name = ''/scriptinput bind_value={name}

Ahora bien, si namese modifica el campo de entrada, se actualizará su valor. Y lo contrario también es cierto: si el usuario actualiza el formulario, el namevalor de la variable cambia.

Solo tenga en cuenta que la variable debe definirse utilizando let/vary no const, de lo contrario, Svelte no podrá actualizarla, ya que constdefine una variable con un valor que no se puede reasignar.

bind:valuefunciona en todos los tipos de campos de entrada ( type="number", type="email"y así sucesivamente), pero también funciona para otros tipos de campos, como textareay select(más sobre esto selectmás adelante).

Casillas de verificación y botones de opción

Las casillas de verificación y las entradas de radio ( inputelementos con type="checkbox"o type="radio") permiten estas 3 vinculaciones:

• bind:checked
• bind:group
• bind:indeterminate

bind:checkednos permite vincular un valor al estado comprobado del elemento:

scriptlet isChecked/scriptinput type=checkbox bind_checked={isChecked}

bind:groupes útil con casillas de verificación y entradas de radio porque se usan muy a menudo en grupos. Con esto, bind:grouppuede asociar una matriz de JavaScript a una lista de casillas de verificación y completarla en función de las opciones elegidas por el usuario.

A continuación se muestra un ejemplo. La goodDogsmatriz se completa en función de las casillas de verificación que marca:

scriptlet goodDogs = []let dogs = ['Roger', 'Syd']/scripth2 Who's a good dog?/h2ul {#each dogs as dog} li{dog} input type=checkbox bind_group={goodDogs} value={dog}/li {/each}/ulh2 Good dogs according to me:/h2ul {#each goodDogs as dog} li{dog}/li {/each}/ul

Vea el ejemplo en https://svelte.dev/repl/059c1b5edffc4b058ad36301dd7a1a58

bind:indeterminatenos permite vincularnos al indeterminateestado de un elemento (si quieres aprender más dirígete a https://css-tricks.com/indeterminate-checkboxes/)

Seleccionar campos

bind:valueTambién funciona para que el selectcampo de formulario obtenga el valor seleccionado asignado automáticamente al valor de una variable:

scriptlet selected/scriptselect bind_value={selected} option value="1"1/option option value="2"2/option option value="3"3/option/select{selected}

Lo bueno es que si generas opciones dinámicamente a partir de una matriz de objetos, la opción seleccionada ahora es un objeto, no una cadena:Te recomendamos Dioses y mitos

scriptlet selectedconst goodDogs = [ { name: 'Roger' }, { name: 'Syd' }]/scripth2List of possible good dogs:/h2select 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}

Ver ejemplo: https://svelte.dev/repl/7e06f9b7becd4c57880db5ed184ea0f3

selectTambién permite el multipleatributo:

scriptlet selected = []const goodDogs = [ { name: 'Roger' }, { name: 'Syd' }]/scripth2List of possible good dogs:/h2select multiple bind_value={selected} {#each goodDogs as goodDog} option value={goodDog}{goodDog.name}/option {/each}/select{#if selected.length}h2Good dog selected:/h2ul {#each selected as dog} li{dog.name}/li {/each}/ul{/if}

Ver ejemplo: https://svelte.dev/repl/b003248e87f04919a2f9fed63dbdab8c

Otras encuadernaciones

Dependiendo de la etiqueta HTML en la que estés trabajando, puedes aplicar diferentes tipos de enlaces.

bind:fileses un enlace válido en type="file"elementos de entrada para vincular la lista de archivos seleccionados.

El detailselemento HTML permite el uso de bind:openpara vincular su valor de apertura/cierre.

Las etiquetas HTML audioy videomultimedia le permiten vincular varias de sus propiedades: currentTime, duration, paused, buffered, seekable, played, volume, playbackRate.

textContenty innerHTMLse pueden vincular a contenteditablelos campos.

Todo muy útil para esos elementos HTML específicos.

Enlaces de lectura individual

offsetWidth, offsetHeight, clientWidth, clientHeightse puede limitar la lectura únicamente en cualquier elemento HTML de nivel de bloque, excluyendo etiquetas void (como br) y elementos que estén configurados para estar en línea ( display: inline).

Obtener una referencia al elemento HTML en JavaScript

bind:thises un tipo especial de enlace que le permite obtener una referencia a un elemento HTML y vincularlo a una variable de JavaScript:

scriptlet myInputField/scriptinput bind_this={myInputField} /

Esto es útil cuando necesita aplicar lógica a los elementos después de montarlos, por ejemplo, utilizando la onMount()devolución de llamada del evento del ciclo de vida.

Componentes de enlace de apoyos

El uso bind:puede vincular un valor a cualquier propiedad que un componente exponga.

Digamos que tienes un Car.sveltecomponente:

scriptexport let inMovement = false/scriptbutton on_click={() = inMovement = true }Start car/button

Puedes importar el componente y vincular la inMovementpropiedad:

script import Car from './Car.svelte'; let carInMovement;/scriptCar bind_inMovement={carInMovement} /{carInMovement}

Esto puede permitir escenarios interesantes.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Fijaciones Svelte

enlazar:valorCasillas de verificación y botones de opciónSeleccionar camposOtras encuadernacionesEnlaces de lectura individualObtener una referencia al eleme

programar

es

2025-01-23

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente