How to Implement DOM Data Binding in JavaScript

by

Please treat this question as strictly educational. I’m still interested in hearing new answers and ideas to implement this

tl;dr

How would I implement bi-directional data-binding with JavaScript?

Data Binding to the DOM

By data binding to the DOM I mean for example, having a JavaScript object a with a property b. Then having an <input> DOM element (for example), when the DOM element changes, a changes and vice versa (that is, I mean bidirectional data binding).

Here is a diagram from AngularJS on what this looks like:

two way data binding

So basically I have JavaScript similar to:

var a = {b:3};

Then an input (or other form) element like:

<input type="text" value="">

I’d like the input’s value to be a.b‘s value (for example), and when the input text changes, I’d like a.b to change too. When a.b changes in JavaScript, the input changes.

The Question

What are some basic techniques to accomplish this in plain JavaScript?

In specific, I’d like a good answer to refer to:

  • How would binding work for objects?
  • How listening to change in the form might work?
  • Is it possible in a simple way to only have the HTML modified on the template level? I’d like to not keep track of the binding in the HTML document itself but only in JavaScript (with DOM events, and JavaScript keeping reference to the DOM elements used).

What have I tried?

I’m a big fan of Mustache so I tried using it for templating. However, I ran into issues when trying to perform the data binding itself since Mustache processes HTML as a string so after I get its result I have no reference to where the objects in my viewmodel are. The only workaround I could think for this was modifying the HTML string (or created DOM tree) itself with attributes. I don’t mind using a different templating engine.

Basically, I got a strong feeling that I was complicating the issue at hand and there is a simple solution.

Note: Please do not provide answers that use external libraries, especially ones that are thousands of lines of code. I’ve used (and like!) AngularJS and KnockoutJS. I really don’t want answers in the form ‘use framework x’. Optimally, I’d like a future reader who doesn’t know how to use many frameworks to grasp how to implement bi-directional data-binding herself. I do not expect a complete answer, but one that gets the idea across.

15 Answers
15

Leave a Comment