Two-way data binding

Traditional web applications are commonly developed through a one-way data binding mechanism. This means there is only a rendering step that attaches the data to the view. This is done with the following code snippet in the index.html file:
<input id="plate" type="text"/>
<button id="showPlate">Show Plate</button>
Consider the following code snippet in the render.js file:
snippet
var plate = "AAA9999";
$("#plate").val(plate);
$("#showPlate").click(function() {
alert(plate);
});

What happens when we change the plate and click on the button? Unfortunately, nothing.

In order to reflect the changes on the plate, we need to implement the binding in the other direction, as shown in the following code snippet (in the render.js file):
snippet
var plate = "AAA9999";
$("#plate").val(plate);
$("#showPlate").click(function () {
plate = $("#plate").val(); //boilerplate code
alert(plate);
});

Every change that occurs in the view needs to be explicitly applied to the model, and this requires a lot of boilerplate code, which means snippets of code that have to be included in many places to keep everything synchronized.

With two-way data binding, the view and controller are always kept synchronized without any kind of boilerplate.
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #