More Complex Bindings with Svelte
By: John Au-Yeung
Tags: Programming, Web Development, JavaScript, Technology, Software Development

Photo by John Barkiple on Unsplash

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to use the bind directive outside of input elements.

Media Elements

We can use the bind directive with audio or video elements.

For instance, we can bind to various attributes of audio or video elements as follows:

<script>

let time = 0;

let duration = 0;

let paused = true;

</script> <video

bind:currentTime={time}

bind:duration

bind:paused

controls

src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'

>

</video>

<p>{time}</p>

<p>{duration}</p>

<p>{paused}</p>

In the code above, we used the bind directive to bind to currentTime , duration , and paused properties of the DOM video element.

They’re all updated as the video is being played or paused if applicable.

6 of the bindings for the audio and video elements are read only, they’re:

duration — length of the video in seconds

— length of the video in seconds buffered — array of {start, end} objects

— array of objects seekable — array of {start, end} objects

— array of objects played — array of {start, end} objects

— array of objects seeking — boolean

— boolean ended — boolean

2 way binds are available for:

currentTime — current point in the video in seconds

— current point in the video in seconds playbackRate — how fast to play the video

— how fast to play the video paused

volume — value between 0 and 1

Video also has the videoWidth and videoHeight bindings.

Dimensions

We can bind to the dimensions of an HTML element.

For instance, we can write the following to adjust the font size of a piece of text as follows:

<script>

let size = 42;

let text = "hello";

</script> <input type=range bind:value={size}> <div >

<span style="font-size: {size}px">{text}</span>

</div>

There’re also read-only bindings for width and height of elements, which we can use as follows:

<script>

let w;

let h;

</script> <style>

div {

width: 100px;

height: 200px;

}

</style> <div bind:clientWidth={w} bind:clientHeight={h}>

{w} x {h}

</div>

bind:clientWidth and bind:clientHeight binds the width and height to w and h respectively.

This Binding

We can use the this bind to set the DOM element object to a variable.

For instance, we can use the this binding to access the canvas element as follows:

<script>

import { onMount } from "svelte"; let canvas; onMount(() => {

const ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(20, 100);

ctx.lineTo(100, 100);

ctx.stroke();

});

</script> <canvas

bind:this={canvas}

width={500}

height={500}

></canvas>

In the code above, we put our canvas manipulation code in the onMount callback so that we only run the code when the canvas is loaded.

We have bind:this={canvas} to bind to the canvas element so that we can access it in the onMount callback.

In the end, we get an L-shaped line drawn on the screen.

Photo by Markus Spiske on Unsplash

Component Bindings

We can bind to component props with bind .

For example, we can write the following code to get the value from the props as follows:

App.svelte :

<script>

import Input from "./Input.svelte";

let val;

</script> <Input bind:value={val} />

<p>{val}</p>

Input.svelte :

<script>

export let value;

</script> <input bind:value={value} />

In the code above, we have value bound to the input element. Then since we passed val in as the value of the value prop and used the bind directive, val in App will be updated as value in Input is updated.

So when we type into the input box, the value will also be shown in the p element below.

Conclusion

We can bind to media elements when we use bind with some property names.

Using the this binding, we can get the DOM element in the script tag and call DOM methods on it.