A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Estructura de control: each

9/26
Recursos

Aportes 8

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

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>

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}

Aun pienso que angular sigue siendo el rey en foreach

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.

Sin duda un each muy muy raro ūüėā

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}

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!

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.