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 secondsbuffered
— array of{start, end}
objectsseekable
— array of{start, end}
objectsplayed
— array of{start, end}
objectsseeking
— booleanended
— boolean
2 way binds are available for:
currentTime
— current point in the video in secondsplaybackRate
— how fast to play the videopaused
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.