Implementing data binding

After clarifying what we mean by data binding, let's see what are the most common techniques used for its implementation. We will explore these techniques gradually going from the most simple to the most sophisticated that use advanced features of JavaScript.

Manual data binding

The simplest way to set up a data binding relationship between two objects is manual binding. Let's consider the following markup:

<label>Name <input type="text" id="txtName"></label><br/> 
<label>Surname <input type="text" id="txtSurname"></label><br/> 
<button id="btnSave">Save</button> 

It defines an HTML view with two text boxes and a save button. In our data binding model, the DOM elements that correspond to the two textboxes are the data target objects. Now, let's consider the following code:

function Person(name, surname) { 
  this.name = name; 
  this.surname = surname; 
} 
 
person = new Person("John", "Smith"); 

The person...