Copyright

Data Binding in JavaScript

Instructor: Martin Gibbs

Martin has 16 years experience in Human Resources Information Systems and has a PhD in Information Technology Management. He is an adjunct professor of computer science and computer programming.

In Web applications, it is important to have a useful graphical user interface. But what if we want to make it more dynamic and connect data to it? This lesson will show how to bind data to the user interface. Working code examples are provided.

Data Binding

The user interface or UI is the piece of our web applications that we present to the end user. Sometimes we want to update the UI to reflect changes in input or vice versa. For this task, we can use data binding. This means that we can connect changes to an object to the UI.

For example, if you have an Employee Name input field, then you should be able to have the underlying data change as well. Most data binding is done between an external application and an underlying database system. However, we now have tools that let us complete two-way binding right in the web browser. Two-way binding means that updates to the UI and model are kept in sync.

The graphic below shows how one-way and two-way binding work.


Two-way data binding


The word model in the graphic simply means the data model. In our example, we will be using an Employee Name and Rate as fields in our model. When they are updated in the UI, they get updated in the model (and vice versa). There are tools out there such as AngularJS, Knockout, Backbones, Derby, or Meteor. These tools provide built-in data binding and their own syntax.

Data Binding in JavaScript

You can also accomplish binding in native JavaScript! First, let's build a simple HTML page with some inputs. When the user enters data in the fields, we want to dynamically update the UI. This is why you will see that each field is repeated. Don't worry, it will make sense when we get to the actual JavaScript.

<html>
<head>
<title>Data Binding in JavaScript</title>
<head>
<body>
<p>Employee Name: <input class="emp" type="text"></p>
<p>Output: <input class="emp" type="text"></p>
<p>Rate: <input class="rate" type="text"></p>
<p>Output: <input class="rate" type="text"></p>
<script src="bindMe.js"></script>
</body>
</html>

When you open this page in a browser, it looks like this:


Data binding HTML output
Data binding HTML output


Now for the fun part. The following JavaScript may look intimidating, but when examined carefully, we can see how the data is kept in sync with the UI. Recall that we have two fields, each of the same class and name for both Employee Name and Rate. The JavaScript code looks at these and ensures that both are kept up to date.

var $scope = {};
function bindMe() {
  var boundClasses = ["emp", "rate"];
  var attachEvent = function (classes) {
  classes.forEach(function (thisClass) {
   var elements = document.getElementsByClassName(thisClass);
   for (var i in elements) {
    elements[i].onkeyup = function bindMe() {
    for (var i in elements) {
     elements[i].value = this.value;
    }
   }
  }
  Object.defineProperty($scope, className, {
   set: function (newValue) {
    for (var i in elements) {
     elements[i].value = newValue;
    }
   }
  });
});
};
  attachEvent(boundClasses);
}();

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 200 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create an account
Support