Estaba tratando de recorrer e inicializar un diccionario basado en un accesorio en esbelto, pero hasta ahora parece imposible. Tiene que haber una manera de hacer esto, ¿verdad?
<script> export let max; let map = {}; $: if(max != undefined){ for(var i=0; i<max; i++){ if(i<5) { map["id_"+i] = 1; } else { map["id_"+i] = -1; } } } </script> <p>{max}</p>
No estoy seguro de cuál era exactamente el problema de su versión (cambiaría a $: if(max) {...}
) (resulta que estaba usando var
en lugar de let
) pero si coloca la funcionalidad en la función onMount funciona >> REPL
<script> import Component from './Component.svelte' </script> <Component max={20}/>
<script> import {onMount} from 'svelte' export let max; let map = {}; onMount(() => { for(var i=0; i<max; i++){ if(i<5) { map["id_"+i] = 1; } else { map["id_"+i] = -1; } } console.log(map) }) </script> <p>{max}</p>
La versión de Corrl funciona, pero tiene una advertencia importante: su matriz no se actualizará si cambia el accesorio máximo sobre la marcha, porque el componente no se destruirá ni se volverá a montar y, por lo tanto, su rutina de matriz no se ejecutará de nuevo.
Tal vez esta sea su intención, o tal vez no lo sea.
Una versión reactiva mantendrá la matriz actualizada. Sin embargo, cuando se trata de declaraciones reactivas, mi consejo siempre es mantener estas declaraciones lo más simples posible.
Una solución más limpia a su problema sería mover su rutina de creación de matrices a una función simple que acepte el valor max
como entrada y devuelva la matriz inicializada:
function makeMap(max) { const map = {} for(var i=0; i<max; i++){ if (i<5) { map["id_"+i] = 1 } else { map["id_"+i] = -1 } } return map }
Entonces su código reactivo se convierte en muy simple:
$: map = makeMap(max)
que respeta la regla fundamental de asignación reactiva con la variable reactiva ( map
) en el lado izquierdo y la dependencia ( max
) en el lado derecho.
Aquí hay un REPL que demuestra la diferencia entre actualizar su matriz a través de una declaración reactiva y inicializarla a través onMount
. Eche un vistazo a la consola mientras cambia el apoyo max
pasado al componente haciendo clic en el botón +
.