More Complex Bindings with Svelte
Tags: webdev, programming, javascript, svelte
Published: 2021-01-28 21:40:35

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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
*   `buffered` — array of `{start, end}` objects
*   `seekable` — array of `{start, end}` objects
*   `played` — array of `{start, end}` objects
*   `seeking` — boolean
*   `ended` — boolean

2 way binds are available for:

*   `currentTime` — current point in the video in seconds
*   `playbackRate` — 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.

### 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.

Component props can also be used with `bind` , then we get 2-way binding between parent and child via the props.