2 way data binding in JavaScript

Question

Two-way data binding refers to the ability to bind changes to an object’s properties to changes in the UI, and vice-versa.

Can we achieve 2-way data-binding with JavaScript?

Especially 2 Way Data Binding without Frameworks.

Answer 1

When an input is changed update the value, add a setter to the value which sets the inputs content. E.g this element:

<input id="age">

And some js:

var person = (function(el){
 return {
   set age(v){
    el.value = v;
   },
   get age(){
     return el.value;
   }
 };
})(document.getElementById("age"));

So you can do:

 person.age = 15;

And the input will change. Changing the input changes person.age