Databinding

Simple HTML databinding:

var url = "http://bla.com/img.jpg"
<img src=url/>

Now, when I assign a new value to url, the image will also update. Thus, the src attribute of the img tag is bound to the url variable. This is one way databinding. In some cases we want to bind a value not to a tag's attribute, but instead to its body. For that we can use the special databind attribute:

var txt = "This is a text"
<span databind=txt/>

The body of the span will contain the value of txt, and is updated whenever txt updates.

Some HTML tags are also input tags, for instance a text input:

var txt = "This is a text"
<input type="text" databind=txt/>

Because <input> is an input tag (as is <textarea> and <select>), a two-way databinding is established. When the user changes the input, this change is reflected in txt and when txt updates, this change is visible in the input.

lang/databinding.txt · Last modified: 2020/02/17 15:02 by Zef Hemel