Two-way data binding - Rookie Nerd

Creating services with the service

Creating services with the provider

Constant

Value

Decorator

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.