More Complex Bindings with Svelte

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.