Best solution for lightweight one way data binding [closed]

Question

I have a single page application I'm working on in which a variable x can change for many reasons. I want the value displayed in the DOM (the div below) to at all times match the value of the javascript variable.

I understand frameworks like angular are good for this, but I'm looking for a more lightweight and simple solution. I'm already using JQuery and underscore.js on the page if that helps.

 <script>
    var x = 100
    </script>

    <div id="value_display">100</div>

Ideally I'd like something where I just need to provide the variable and the element as arguments. For example:

bind(x,'#value_display')

Answer 1

You ask for a simple implementation (no large frameworks) of an observer pattern, ideally just by providing the variable name and the element's id as arguments.

What you ask for is possible, if we define the bind() function to repeatedly poll x to see if it has changed. Note that bind then has to be called like this:

bind('x','value_display');

A working example:

var x = 100;

function bind(varName, elementId){
  var lastValue;
  function check(){
    if(lastValue !== window[varName]){
      lastValue = window[varName];
      document.getElementById(elementId).innerHTML = lastValue; 
    }
  }
  //poll for changes every 50 milliseconds
  setInterval(check, 50); 
}

//bind x to value_display

bind('x','value_display');

//test function by changing x every 100th millisecond

setInterval(function(){
    x = +new Date;
  },
  100
);

<div id="value_display"></div>

Personally, I would prefer a lightweight publisher/subscriber module over using a polling function, but that would require assignment to the variable x to be controlled by a function/method (some kind of setter). If you research (google) observer pattern or pub/sub pattern, you will find easy ways of implementing this in much less code than a large framework—but probably not as lightweight as the polling approach.