O'Reilly logo

Mastering JavaScript Object-Oriented Programming by Andrea Chiarelli

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required