Hey folks...In last tutorial we have discussed about Binding Today we will look a little more about Binding concepts.

Multiple in select input field.

A select can have a multiple attribute, in which case it will populate an array rather than selecting a single value.

<h2>Types</h2>

<select multiple bind:value={fruits}>
    {#each fruits as type}
        <option value={type}>
            {type}
        </option>
    {/each}
</select>

We specify that this select can have multiple selection possible from the given options. There is a special case while using contenteditable as true with some element . Element having contenteditable =true can support innerHtml and textContent bindings. Example as follow

<script>
    let html = '<p>Its me</p>';
</script>

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

<pre>{html}</pre>

<style>
    [contenteditable] {
         color :red;
        border-radius: 4px;
    }
</style>

Inner Html of the div will be binded to html variable .The html content of div can be changed by changing the html variable .We set it to inner Html of the given div.

---

We can bind the value of each element inside for each block.

{#each todos as todo}
    <input
        type=checkbox
        bind:checked={todo.done}
    >

    <input
        bind:value={todo.text}
    >
{/each}

These binding will directly reflect to the actual todos array. This way of doing is very helpful and easy.

Note that interacting with these elements will mutate the array. If you prefer to work with immutable data, you should avoid these bindings and use event handlers instead.

---

We can also bind to some of the properties of and elements like currentTime duration paused etc.

The complete set of bindings for and is as follows — six readonly bindings...

duration (readonly) — the total duration of the video, in seconds buffered (readonly) — an array of {start, end} objects seekable (readonly) — ditto played (readonly) — ditto seeking (readonly) — boolean ended (readonly) — boolean ...and five two-way bindings:

currentTime — the current point in the video, in seconds playbackRate — how fast to play the video, where 1 is 'normal' paused — this one should be self-explanatory volume — a value between 0 and 1 muted — a boolean value where true is muted

With the help of these bindings we can create our own controls for audio and video

---

We can bind the height ,width of the elements .They are only in readOnly format .

<script>
    let w;
    let h;
    let size = 22;
    let text = 'Yes Bind me';
</script>

<input type=range bind:value={size}>
<input bind:value={text}>

<p>size: {w}px x {h}px</p>

<div bind:clientWidth={w} bind:clientHeight={h}>
    <span style="font-size: {size}px">{text}</span>
</div>

Here we bind w,h with clientWidth,clientHeight repsectively. Where the dimensions of the div updates, it reflects to h,w. When we update range .It changes the size as size is binded with the value of the range.

There are some special cases where we can't use this approach to bind height and width.So be careful while using in this scenerio.

bind:this is a special kind of binding that allows you to get a reference to an HTML element and bind it to a JavaScript variable.

This is handy when you need to apply logic to elements after you mount them, for example, using the onMount() lifecycle event callback.We will look in more depth in coming tutorial.

That's all for this tutorial for this tutorial .

Thanks for reading . I hope it has been a helpful read. Please leave any questions or comments below. Don't forget to like and share the article if it helps you in any way. Stay curious, cheers.