DEV Community

Cover image for Svelte Series-4: Two-Way Binding
Garlic Garlic
Garlic Garlic

Posted on • Updated on

Svelte Series-4: Two-Way Binding

MVVM

Currently common software development architecture patterns are MVC, MVP, MVVM.

Among them MVC (Model-View-Controller) is divided into three parts:

  • M (Model): responsible for managing the application data
  • V (View): mainly corresponds to the application of the user interaction page
  • C (Controller): receives the data passed in from the user interface and calls the corresponding controller to update the data. When the data is updated, it will trigger the update of the page.

MVC

The other architectural pattern, MVVM, is also divided into three parts:

  • M (Model)
  • V (View)
  • VM (ViewModel): Responsible for exposing the model's data and commands so that the view can use them.

MVVM

Two-way data binding is where data changes drive view updates, and view updates trigger data changes; both Vue and Svelte support it. In Vue, we use v-model to implement two-way data binding. Since Svelte is so convenient to manipulate the data, you may think that we write this code directly, and then Svelte can handle two-way binding for us.

<script>
  let str = ''
</script>

<div>
  <input type="text" value={str} />
  <span>input value: {str}</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Unfortunately, the above code doesn't handle two-way binding for us, if we want to do two-way binding, we need to write it as below:

<script>
  let str = ''
</script>

<div>
  <input type="text" bind:value={str} />
  <span>input value: {str}</span>
</div>
Enter fullscreen mode Exit fullscreen mode

Notice the difference? That's right, we need to use bind, which has other uses besides two-way binding, and which we'll continue to use in later chapters.

Two-way binding in form component

<script>
  let value = '';
</script>

<input type="text" value={value} />
<p>value: {value}</p>
Enter fullscreen mode Exit fullscreen mode

If we follow the logic of Vue and write the above code directly, we will find that when we fill in the content in the input box, the output is not followed on the page.

<script>
  let value = '';
</script>

<input type="text" value={value} on:input="{e => value = e.target.value}" />
<p>value: {value}</span>
Enter fullscreen mode Exit fullscreen mode

input[type="text"]

<script>
  let value = '';
</script>

<input bind:value={value} />
<p>value: {value}</p>
Enter fullscreen mode Exit fullscreen mode

input[type="number"]

<script>
  let value = 1;
</script>

<input type="number" bind:value={value} />
<input type="range" bind:value={value} min={1} max={5} />
Enter fullscreen mode Exit fullscreen mode

input[type="checkbox"]

<script>
  let checked = false;
</script>

<label>
  <input type="checkbox" bind:checked={checked} />
  select: {checked}
</label>
Enter fullscreen mode Exit fullscreen mode

input[type="radio"]

<script>
  let radioValue = "";
</script>

<label>
  <input type="radio" bind:group={radioValue} value={1} />
  1
</label>

<label>
  <input type="radio" bind:group={radioValue} value={2} />
  2
</label>

<label>
  <input type="radio" bind:group={radioValue} value={3} />
  3
</label>

<p>chosen: {radioValue}</p>
Enter fullscreen mode Exit fullscreen mode

bind:group

<script>
  let checkboxValue = [];
</script>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={1} />
  1
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={2} />
  2
</label>

<label>
  <input type="checkbox" bind:group={checkboxValue} value={3} />
  3
</label>

<p>chosen: {checkboxValue.join(',')}</p>
Enter fullscreen mode Exit fullscreen mode

select

<script>
  let selectValue;
</script>

<select bind:value={selectValue}>
    <option value={1}>1</option>
    <option value={2}>2</option>
    <option value={3}>3</option>
</select>

<p>chosen: {selectValue}</p>
Enter fullscreen mode Exit fullscreen mode

In addition to the components listed above that enable bidirectional binding, Svelte also supports bidirectional binding of many elements, such as textarea, media tags video, audio, etc.

Two-way binding in custom component

<script>
  export let value;
</script>

<input bind:value={value} />
Enter fullscreen mode Exit fullscreen mode

Here we encounter a new keyword, export, which we'll cover in the next chapter.

<script>
  import Child from './Child.svelte';
  let fatherValue = ''
</script>

<Child bind:value={fatherValue} />
<input bind:value={fatherValue} />
Enter fullscreen mode Exit fullscreen mode

Brief Summary

In this chapter we have learned:

  • Using bind in Svelte to implement two-way data binding for form type components.

Top comments (0)