Svelte - Advanced Bindings

Quiz

Advanced bindings in Svelte offer more powerful features compared to the basic binding options, such as content editable bindings, each block binding, media elements, dimensions, This, and many more. They improvehow Svelte reacts to changes by enabling two-way data syncing between components and the DOM.

Contenteditable Bindings

Contenteditable bindings in Svelte allow you to create editable elements in your application, enabling users to modify text directly within the interface. Using the contenteditable attribute, we can create editable text areas within our application.

Syntax

To make element editable in Svelte, you can use the contenteditable attribute along with a binding directive. Here's the basic structure:

<div contenteditable="true" bind:innerHTML={variable}></div>

Each Block Bindings

Each Block Bindings in Svelte allows us to create dynamic lists of items, where each item can have properties linked to what users input.

Syntax

To create an each block, you can use the following structure:

{#each items as item}
  <!-- HTML element(s) using item -->
{/each}

Media Elements

Media elements in Svelte bindings allow you to connect properties of <video> and <audio> HTML elements to variables in your Svelte components. This means developers can build custom media players with interactive controls, making it simpler to manage playback and show media details.

Syntax

To bind video and audio elements in HTML simply use bind: directive. Here is the simple structure:

For <audio>:

<audio
   {src}  <!-- Source of the audio file -->
   bind:currentTime={time}  <!-- Binds current playback time -->
   bind:duration  <!-- Binds total duration of the audio -->
   bind:paused  <!-- Binds whether the audio is paused -->
></audio>

For <video>:

<video
   {src}  <!-- Source of the video file -->
   bind:currentTime={time}  <!-- Binds current playback time -->
   bind:duration  <!-- Binds total duration of the video -->
   bind:paused  <!-- Binds whether the video is paused -->
   controls  <!-- Adds default controls (optional) -->
></video>

Dimensions

Dimensions binding in Svelte is an advanced binding feature that allows us to bind the dimensions of an element, such as its width and height, using properties like clientWidth and clientHeight.

Syntax

You can simply bind the dimensions of an element in svelte using the following syntax:

<div bind:clientWidth={w} bind:clientHeight={h}>
   <!-- Content here -->
</div>

This Binding

The bind:this in Svelte is a special directive that allows you to bind a variable to a specific DOM element or component. This gives you direct access to that element, so you can change it using code.

Syntax

To bind a variable to a DOM element or component, use the following syntax:

<element bind:this={variable}></element>

Component Bindings

Component binding in Svelte allows you to create a two-way data flow between parent and child components, enabling them to communicate and share states easily.

Syntax

To bind a property from a child component to a variable in the parent component, use the following syntax:

<ChildComponent bind:property={variable}/>

Binding to component instances

In Svelte you can use bind:this to create a reference to a specific component. This allows you to call its methods or access its properties directly from the parent component.

Setting Up the Binding

You set up the binding in the parent component like this:

<Canvas bind:this={canvas} />

Using the Reference

Once you have the reference, you can use it to call methods. For instance, you could add a button that clears the canvas when it is clicked.

<button onclick={() => canvas.clear()}>Clear</button>

Example

The following is a simple example of creating an editable text area in a Svelte application using contenteditable attribute.

<!--App.svelte--->
<script>
    let editableText = "Type something here...";
</script>
<style>
    .editable-container {
        border: 2px solid #007BFF;
        border-radius: 8px;
        padding: 15px;
        width: 300px;
        margin: 20px auto;
        text-align: center;
        font-size: 18px;
        background-color: #f0f8ff;
        transition: border-color 0.3s;
    }

    .editable-container:focus {
        border-color: #0056b3;
        outline: none;
    }

    .char-count {
        margin-top: 10px;
        font-size: 14px;
        color: #555;
    }
</style>
<div 
    class="editable-container" 
    contenteditable="true" 
    bind:innerHTML={editableText} 
    on:focus={() => editableText = editableText} 
>
    {editableText}
</div>
<p class="char-count">Character count: {editableText.length}</p>

Output

Print Page