javascript / intermediate
Snippet
Rerendering erzwingen mit dem Key-Block
Der {#key}-Block zerstört und erstellt seinen Inhalt neu, wann immer sich der Wert des Ausdrucks ändert. Dies ist besonders nützlich, um Übergänge (Transitions) bei einem Element erneut auszulösen, das im DOM verbleibt, oder um den internen Status einer Komponente vollständig zurückzusetzen, wenn sich eine bestimmte ID ändert.
snippet.js
1
2
3
4
5
{#key uniqueId}<div in:fly={{ y: 20 }} out:fade><ComplexComponent data={currentData} /></div>{/key}
svelte
Erklärung
1
{#key uniqueId}
Sagt Svelte, dass 'uniqueId' überwacht werden soll. Bei einer Änderung wird der gesamte Block neu eingehängt.
2
in:fly={{ y: 20 }}
Da das Element neu erstellt wird, wird die Eingangs-Transition jedes Mal ausgeführt, wenn uniqueId aktualisiert wird.