No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
23H
57M
54S
Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Eventos del DOM y Binding

10/26
Recursos

Aportes 16

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

DOM events

Se nos presenta el siguiente escenario:

Aqu铆 es donde viene la magia de Svelte 鉁, recordemos que es una framework que pasa por un proceso de compilado. Siendo intuitivos, gener谩 un Abstract Sintax Tree o AST, para los amigos 馃き, y empieza a generar una estructura donde 鈥se podr铆a decir鈥 que hay una relaci贸n de eventos del DOM. En pocas palabras, son indexaciones donde se infiere esta definido o no.

Data model

Este escenario es similar en concepto al patr贸n arquitectural view-model-viewmodel en desarrollo pero realmente es otro escenario en construcci贸n porque Svelte, al compilar, transpila el c贸digo JS que escribimos, a unas simples asignaciones que desencadenan a un nuevo render.

a asignaci贸n de la variable se puede omitir en bind si est谩 tiene el mismo nombre de la propiedad a binding

<script> 
    let value = " ";
<script>

<input type="text" bind:value />

<h1> {value} </h1>

El profe dijo manejo de datos 鈥渂idimensional鈥 pero creo que se referia a 鈥渂idireccional鈥 con respecto al two way data-binding que maneja Svelte. Para que no quede duda. =)

R谩pido, f谩cil, entendible鈥 me va gustando Svelte

Aqu铆 hay informaci贸n y ejemplos para complementar 茅ste tema: https://svelte.dev/tutorial/numeric-inputs

Excelente, aqu铆 ser铆a bueno usar la etiqueta <slot /> para no definir un prop text que es el nombre que muestra nuestro button

ahora s铆 el input es uno m煤ltiple por con un check-box o radio, el valor se guardar谩 en un array con los valores seleccionados. y se pasar谩 a la variable definida en bind:value

Me est谩 gustando mucho el curso y Svelte se me esta facilitando bastante

Si utilizan Emmet para el autocompletado, en la parte que crea el div que contiene el input, utiliza " div.Input " para crear el elemento.

Solo para divs, pueden utilizar " .Input " y tambi茅n les crear谩 el elemento.

En el 煤ltimo caso de la clase bind nos brinda un m茅todo set get juntos que rompe el.ciclo de arriba hacia abajo para poder manipular el valor y que estos cambios se actualicen en todo el componente. lo podr铆amos utilizar tambi茅n para actualizar un valor pasado a un componente, como dije rompe el ciclo. y esto es ideal en ciertas situaciones aunque un poco cutresillo en lo personal, si se utiliza de con exceso. o en situaciones innecesarias.
Si alguien no entendi贸 c贸mo se conect贸 todo con el on:click, aqu铆 le dejo la documentaci贸n oficial al respecto (svelte nos ayuda que no sea tan boilerplatey): https://svelte.dev/tutorial/dom-event-forwarding Event forwarding works for DOM events too. We want to get notified of clicks on our聽<CustomButton>聽鈥 to do that, we just need to forward聽click聽events on the聽<button>聽element in聽CustomButton.svelte.

bind() es un m茅todo del objeto Function creado para manipular el valor contextual de this.

asi se veria si quisieran hacerlo como react

![](

Esto si es interesante , muy parecido a lo que hace Angular y mas facil que el setSate de React

Binding

馃憣