Eventos del DOM y Binding

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

Aportes 17

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Emmanuel Rodríguez

hace 4 años

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.

Juan David Avila Caycedo

hace 4 años

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>

Christian Armando Consuelo Mayén

hace 4 años

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

Victor Contreras

hace 4 años

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

wilantury

hace 4 años

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

Ismael López

hace 4 años

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

Juan David Avila Caycedo

hace 4 años

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

Eduardo Cecilio Flores Ambrosio

hace 3 años

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

Andrés Chapetón

hace 4 años

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.

Juan David Avila Caycedo

hace 4 años

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.

Gonzalo Iván Peñaranda Araque

hace 8 meses

Tengo una inquietud: En la definición del componente Button, al definir el botón \<button>, el profesor dejó el evento on:click especificado ahí. Era realmente necesario? Pregunto porque, en el componente App.svelte tenemos la función handleClick definida y cuando se haga click, se hace tras haber importado el componente Button en App. De resto, comprendo que la lógica en Button valide si se muestra el contador en el texto del botón o no.

Gerardo Castillo

hace 2 años

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.