Hi Guys,

In this blog I will try to explain how to implement bi-directional binding using plain JavaScript.

Step 1:
Create a custom attribute using HTML data-*.
The data-* attributes is used to store custom data private to the page or application.
The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

Here we have created a custom attribute with name "data-bind" which I have used in DOM elements i.e input field and division which will hold object content.

data-bind="<dom attribute>:<object property>" e.g data-bind="innerHTML:name"

Step 2:
In JavaScript create an user object which holds properties e.g name. Then create a function which will bind keyup event on DOM element. Now when any value is updated in your text field, keyup event will get fired which will update object's property. 
Now in order to show updated value on UI we have to use JavaScript observe function which monitor any mutation on object.


var user={};
var txtObj = document.getElementById("name");
var divObj = document.getElementById("showName");
binding(txtObj, user);
binding(divObj, user);
   
function binding(obj){
    var value = obj.getAttribute("data-bind");
    var attr = value.split(":")[0];
    var attrVal = value.split(":")[1];
    obj.addEventListener("keyup", function(){
 if(user[attrVal]){
     user[attrVal] = "";
 }
 user[attrVal] = obj[attr];
    });
    
    Object.observe(user, function(change){
 obj[attr] = user[attrVal];
    });
}










Plunker: https://plnkr.co/edit/CIvSKAsSvjZNNmueyduU?p=preview

Good Day :)