Two Way Data Binding in JavaScript

This JavaScript code snippet demonstrates two-way data binding with real-time updates. It dynamically syncs data between the input box and a counter. The Observable class facilitates seamless communication between models and views, ensuring instant feedback. Watch the input box and counter values effortlessly stay in sync.

You can integrate this snippet in web forms for instant feedback. Moreover, you can easily modify the code according to your project’s requirements.

How to Create a Functionality for Two-Way Data Binding in JavaScript

1. Create a structured HTML layout with an input box, a button for triggering changes, and elements for displaying data.

<div class="center">
<h1>Fancy Two Way Data 
  <span id="input-watcher">Binding</span>
  </h1>
<p>Time Elapsed <span id="watcher">0</span></p>
<input id="input-box" style="width: 100px">
    <button id="collapse-button">
  Change
  </button>
</div>

2. Style the basic interface using the following CSS styles: (Optional)

body {
  font-family: "Space Mono", monospace;
}

.center {
  text-align: center;
}

#input-box {
  transition-property: width;
  transition-duration: 1s;
}

button {
  background-color: teal;
  padding: 7px;
  border-style: none;
  border-radius: 3px;
  color: white;
}

button:focus {
  outline: 0;
}

3. In the JavaScript section, the code begins by defining an Observable class for data tracking. Create instances for your data, like the bound counter and input binding.

Set up observers to track changes. For instance, the counterWatcher observes the bound counter, while the inputCollapseWatcher manages changes in the input box’s visibility and width.

Apply this code to web forms or interactive elements where instant data feedback is crucial. It’s particularly useful for dynamic interfaces, offering a responsive and user-friendly experience.

document.addEventListener("DOMContentLoaded", function (event) {
  //Observable class is something that has a value and can be watched by Observers and dom elements for changes
  let Observable = function (startValue) {
    let value = startValue || undefined;
    let observersModels = [];
    let observersViews = [];
    let notifyViews = () => {
      observersViews.forEach(d => {
        d.innerHTML = value;
      });
    };
    let notifyModels = () => {
      observersModels.forEach(d => {
        d.notify(value);
      });
    };
    let notify = () => {
      notifyModels();
      notifyViews();
    };
    let updateValue = d => {
      value = d;
      notify(value);
    };
    let getValue = () => value;
    let addObserveView = view => {
      observersViews.push(view);
    };
    let addObserveModel =
    observer => {
      if (observer.preNotify === true)
      observer.notify(value);
      observersModels.push(observer);
    };

    return {
      //updates value and notifies that the property changed
      updateValue,
      getValue,
      //add a DOM node that is synced with the value
      addObserveView,
      //add an Observer that with call it's callback when the value changes.
      addObserveModel };

  };

  let Observer = function (notifyCallback, preNotify) {
    let notify = notifyCallback;
    return {
      notify,
      preNotify };

  };

  //value that is going to keep track of a counter variable
  let boundCounter = new Observable(0);

  //an observer that listens and prints the new value when it recieves it
  let counterWatcher = new Observer(value => console.log(`viewWatcher1 noticed change to ${value}`));

  //have the counterWatcher added as an Observer to the bound counter
  boundCounter.addObserveModel(counterWatcher);
  //make the #watcher dom element listen for changes to the value of bound counter
  boundCounter.addObserveView(document.querySelector("#watcher"));

  //a loop that increases the value of the counter by one every second
  //notice how no DOM elements are modified in this code.
  let i = 0;
  setInterval(() => {
    boundCounter.updateValue(i += 1);
  }, 1000);

  //a new and different Observable
  let inputBind = new Observable();
  //the DOM element for the input box
  let inputNode = document.querySelector("#input-box");

  //add event listener to the #input-box element that updates the inputBind Obserable whenever you release a key.
  inputNode.addEventListener('keyup', e => {
    inputBind.updateValue(inputNode.value);
  });

  //add the #input-watcher element as an observer on the inputBind Observable
  inputBind.addObserveView(document.querySelector('#input-watcher'));

  let collapseObservable = new Observable(true);
  let collapseNode = document.querySelector('#collapse-button');

  collapseNode.addEventListener('click', e => {
    collapseObservable.updateValue(!collapseObservable.getValue());
  });

  let inputCollapseWatcher = new Observer(value => {
    if (value === true) {
      inputNode.style.width = 0;
      setTimeout(() => {
        inputNode.style.visibility = "hidden";
      }, 1000);
      inputNode.readOnly = true;
    } else {
      inputNode.style.visibility = "visible";
      inputNode.style.width = '100px';
      inputNode.readOnly = false;
    }

  }, true);

  collapseObservable.addObserveModel(inputCollapseWatcher);
});

That’s all! hopefully, you have successfully created Two Way Data Binding Javascript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.