Two Way Data Binding (Pure JS)

by Volkan Şengül

HTML

İsim: 
<input class="name" type="text" placeholder="isim input 1">
<input class="name" type="text" placeholder="isim input 2">
<hr />
Yaş: <input class="age" type="text" placeholder="yaş input 1">
<input class="age" type="text" placeholder="yaş input 2">
<hr />
<button onclick="scopeTest()">Test et</button>

JavaScript

var $scope = {};
(function () {
    var bindClasses = ["name", "age"];
    var attachEvent = function (classNames) {
        classNames.forEach(function (className) {
            var elements = document.getElementsByClassName(className);
            for (var index in elements) {
                elements[index].onkeyup = function () {
                    for (var index in elements) {
                        elements[index].value = this.value;
                    }
                }
            }
            Object.defineProperty($scope, className, {
                set: function (newValue) {
                    for (var index in elements) {
                        elements[index].value = newValue;
                    }
                }
            });
        });
    };
    attachEvent(bindClasses);
})();

var scopeTest = function(e){
  $scope.name = 'Volkan';
  $scope.age = 40;
};