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.