No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Eventos del DOM y Binding

10/26
Recursos

Aportes 15

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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 “bidimensional” pero creo que se referia a “bidireccional” con respecto al two way data-binding que maneja Svelte. Para que no quede duda. =)

Aquí hay información y ejemplos para complementar éste tema: https://svelte.dev/tutorial/numeric-inputs

Rápido, fácil, entendible… me va gustando Svelte

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
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.

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

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

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

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.

Binding

👌