Learning Svelte

Input Data Binding

Hello friends, this is my third blog post ever, and to tell the truth it's quite difficult for me keeping this challenge up and running, the big problem, i think it's that my mother language it's italian but every day i speak spanish!

But i am here, and i need to do it, it's help me on my journey to become web developer one day soon.

This is post it's very short, i will publish another one about Data Binding, next week to complete my "lesson".

As you now, Svelte is a “radical new approach to building user interfaces”, according to the official documentation.

In practice, Svelte is quite similar to JavaScript frameworks like React, Vue etc.

Today i will write about Input data binding.

Input bindings are essentially just a way you can keep variables inside your components in sync with input fields.

They are very handy when design forms or having any form of data entry.

bind:property

Let’s start with the most common form of binding you’ll often use, which you can apply using bind:value. You take a variable from the component state, and you bind it to a form field:

 <script>

 Let name = “Alessandro”

 </script>

 <p> Your name is: {name}

 <input bind:value = {name}

Now if name changes the input field will update its value. And the opposite is true, as well: if the form is updated by the user, the name variable value changes.

We successfully binded name variable to the input field, when the user makes change to the input field it is going to update the data within your components, this is the most basic example .

bind:value works on all flavors of input fields (type="number", type="email" and so on), but it also works for other kind of fields, like textarea and select

Let's see an example:

<script>
let coffeeOrigins = ["Ethiopia","Colombia","Sumatra","India","Nicaragua"];
let selected;
</script>

<main>

<p> Your have choose: {selected || 'nothing'}</p>

{#each coffeeOrigins as origin}

<label>
<input type="radio" bind:group={selected} value={origin}/>
{origin}
</label>
{/each}

</main>


Thank you for reading, see you next sunday!