Estructuras de ciclo for en documento HTML:
Opción 1:
{#each skills as {name}, i}
<li>{name}</li>
{/each}
Opción 2:
{#each skills as skill, i}
<li>{skill.name}</li>
{/each}
Introducción
Para qué sirve Svelte y qué aprenderas sobre él
¿Qué es Svelte?
Elementos básicos de Svelte
Primeros pasos
Estilos
Componentes
Reactividad
Props
Condicionales
Estructura de control: each
Eventos del DOM y Binding
Ciclo de vida
Stores
Configuración del proyecto
Presentación de Pugstagram
Configurar el entorno de trabajo
Servidor de desarrollo local
Desarrollo de la aplicación
Estructura
Componentes Header y Sidebar
Componente Timeline
Estilos de nuestra aplicación
Conectar nuestra aplicación a una API
Componente Comments
Componente Modal
Header Likes
Deployment
Despliegue en Netlify
Continúa con el Curso de Sapper
Apuntes de Svelte
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 9
Preguntas 0
Estructuras de ciclo for en documento HTML:
Opción 1:
{#each skills as {name}, i}
<li>{name}</li>
{/each}
Opción 2:
{#each skills as skill, i}
<li>{skill.name}</li>
{/each}
Para mÃ, este tipo de declaraciones no me gustan. Me recuerdan a los blade template o JSP/JSF y similiares.
Por ejemplo, yo me siento cómodo con este tipo de declaraciones de VueJS:
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
Si en lugar de un arreglo quieren recorrer un objeto con esta estructura de control, pueden usarlo asÃ:
<script>
const cats = {
bolaDeNieve: 1,
perlita: 2,
}
</script>
{#each Object.entries(cats) as [cat_name, cat_number]}
{cat_name}: {cat_number}
{/each}
Aun pienso que angular sigue siendo el rey en foreach
Sin duda un each muy muy raro 😂
Para reiniciar los estilos predefinidos por el navegador (margin, padding) agregen los siguiente en su archivo App.svelte en la etiqueta <style>
:global(*) {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
Y veran como se quita el margin y el padding que predefine el navegador.
me estaba gustando todo, pero cuando vi el if maso menos y luego cuando vi el forEach ya no me gusto.
Se puede expresar un key que permite identificar de forma exclusiva cada elemento del arreglo. Este key, svelte lo usa para diferenciar cada elemento del arreglo cuando algún dato sea modificado, en caso no establecer el key, al momento de modificar un elemento los agregará al final del arreglo.
En cuanto a su sintaxis, este se agrega al final de la expresión del each entre paréntesis, ejemplos:
{#each items as { id, name, qty }, i (id)}
<li>{i + 1}: {name} x {qty}</li>
{/each}
{#each items as item (item.id)}
<li>{item.name} x {item.qty}</li>
{/each}
Aparte de esto, svelte permite crear un bloque en caso de que el arreglo recorrido esté vacÃo, ejemplo:
{#each todos as todo}
<p>{todo.text}</p>
{:else}
<p>No tasks today!</p>
{/each}
PD: ejemplos tomados de la documentación de svelte.
Bueno las estructuras de control dentro de un framework son una caracterÃstica que los hace diferenciable, en Svelte me recordó mucho a como lo hacÃan en Symfony(Framework PHP). sin el uso de un Virtual Dom, me parece una buena opción!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?