javascript / intermediate
Snippet
DOM-Elemente referenzieren mit bind:this
Obwohl Svelte deklarativ ist, benötigt man manchmal direkten Zugriff auf ein DOM-Element (z. B. für Canvas oder Drittanbieter-Bibliotheken). Die Direktive bind:this weist das gerenderte Element einer Variablen zu.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
<script>let canvas;function init() {const ctx = canvas.getContext('2d');ctx.fillRect(0, 0, 50, 50);}</script><canvas bind:this={canvas}></canvas>
svelte
Erklärung
1
let canvas;
Deklariert eine Variable, die die Referenz auf das DOM-Element halten wird.
2
bind:this={canvas}
Weist Svelte an, die Variable 'canvas' auf dieses spezifische DOM-Element zu setzen, nachdem es erstellt wurde.
3
canvas.getContext('2d')
Ruft Standard-Browser-APIs direkt auf dem referenzierten Element auf.