Implementing Data Binding in JavaScript: Observer, Compiler, and ViewModel

The article begins with an overview of data binding, defining the view (HTML DOM) and the model (JavaScript data objects) and explaining why binding eliminates manual DOM updates, improves development efficiency, and centralizes data handling.

It distinguishes two binding directions: view → model (user input triggers a change event that updates the model) and model → view (model changes automatically re‑render the UI). The latter is implemented using three common patterns: publish‑subscribe (as in Backbone.js), data hijacking (as in Vue.js), and dirty‑checking (as in Angular.js).

A concrete demo of model‑to‑view binding is presented. The implementation consists of three core classes:

Observer : wraps the model with Object.defineProperty to intercept get and set , maintains a subscriber list ( subs ), and publishes updates to all registered callbacks.

Compile : parses a template string, creates a document fragment, traverses all nodes, and for each element or text node extracts binding expressions (e.g., {{person.age}} ), registers the corresponding key with the observer, and replaces the placeholder with the current value.

ViewModel : composes the Observer and Compile objects, initiates data monitoring, compiles the template, and mounts the resulting DOM into a specified wrapper element.

The article also shows how to instantiate the framework with new ViewModel({data: data, template: template}) , and demonstrates interactive usage: clicking a button increments data.age and typing into an input updates data.name , both instantly reflected in the UI without manual DOM manipulation.

Finally, the author notes that this demo is a minimal MVVM implementation, lacking many advanced features, and encourages readers to explore the observer pattern and data‑binding concepts further.