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

Estructura de control: each

9/26
Recursos

Aportes 9

Preguntas 0

Ordenar por:

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

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!