How and why I built 2-Way Data Binding Library

Published Dec 02, 2017Last updated Dec 13, 2017
How and why I built 2-Way Data Binding Library

Whenever I think about the benefits of using a framework/library in javascript, I think of the features it saves me time from writing. One of these features is 2-way data binding.

Angular comes into mind when you think of 2-way data binding initially. But of course, there's tons of obfuscated code, you would have to dissect to fully understand the frameworks magic. And if your like me, you want a way to simplify common features, you'll be using to build applications user interfaces. Introducing the concept of writing native javascript features, such as data binding from scratch in order to limit the amount of unnecessary overhead.

2-way data binding is a design concept that means when you change anything in your model, view gets updated and, on changing anything in the view, model gets updated.

Completed Lab: https://codepen.io/ryarborough/project/editor/ZQLEWY

Let's implement 2-way data binding, by writing 4 html input elements in an index.html file.

Name: <input class="name" type="text">
      <input class="name" type="text">
<hr /> 
Age: <input class="age" type="text">
     <input class="age" type="text">

Now for the completed 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);
})();
  1. We have taken the classes of the elements on which we need to apply 2-way Data Binding in an array named bindClasses.

  2. Then we have an attachEvent which basically iterates through the classes passed in array bindClasses.

  3. We are extracting all the elements by using their class names document.getElementsByClassName(className).

  4. Once the elements are extracted we are binding onkeyup event on it. When this event is triggered it calls a function which stores the current value inside the element.

  5. We have used object.defineProperty to define a property of an object. Here our object is $scope and property is className.

  6. Then we have a set function which serves as setter of the property.

  7. So, if you do something like - $scope.name="Bobby", "Bobby" would be passed as newValue, which would ultimately replace the value being displayed on the view through the following piece of code elements[index].value = newValue.

Discover and read more posts from Robert Yarborough
get started