dmamills/Observable.js

## example.js
var obs = Observable(5);
var i = 0;

function observableEl(obs, numToListen) {

  var el = document.createTextNode(`Listen count: ${numToListen} currentVal: ${obs()}`);

  var remove = obs(function listener(val) {
    el.textContent = `Listen count: ${numToListen} currentVal: ${val}`;
    if(i >= numToListen) {
      el.textContent = `Listen count: ${numToListen} unsubscribed`;
      remove();
    }
  });

  return el;
}

var rootEl = document.createElement('div');
document.body.appendChild(rootEl);


for(let j = 5; j < 10;j++) {
  var obsEl = observableEl(obs, j);
  rootEl.appendChild(obsEl);
  rootEl.appendChild(document.createElement('br'));
}

setInterval(_ => {
  i++;
  obs.set(Math.random() * 100);
}, 1000);

## index.html
<html>
  <head>
    <title>lol</title>
  </head>
  <body>
    <h1>Observable Example</h1>
    <script type="text/javascript" src="/index.js"></script>
    <script type="text/javascript" src="/example.js"></script>
  </body>
</html>

## Observable.js
function Observable(val) {

  var listeners = [];

  observe.set = function(nv) {
    val = nv;

    listeners.forEach(function(l) {
      l(val);
    });
  }

  return observe;

  function observe(fn) {

    if(!fn) {
      return val;
    }

    listeners.push(fn);

    return function remove() {

      for(let i =0; i < listeners.length; i++) {
        if(listeners[i] === fn) {
          listeners.splice(i, 1);
          console.log(listeners);
          break;
        }
      }
    }
  }
}

window.Observable = Observable;
	var obs = Observable(5);
	var i = 0;

	function observableEl(obs, numToListen) {

	var el = document.createTextNode(`Listen count: ${numToListen} currentVal: ${obs()}`);

	var remove = obs(function listener(val) {
	el.textContent = `Listen count: ${numToListen} currentVal: ${val}`;
	if(i >= numToListen) {
	el.textContent = `Listen count: ${numToListen} unsubscribed`;
	remove();
	}
	});

	return el;
	}

	var rootEl = document.createElement('div');
	document.body.appendChild(rootEl);


	for(let j = 5; j < 10;j++) {
	var obsEl = observableEl(obs, j);
	rootEl.appendChild(obsEl);
	rootEl.appendChild(document.createElement('br'));
	}

	setInterval(_ => {
	i++;
	obs.set(Math.random() * 100);
	}, 1000);
	<html>
	<head>
	<title>lol</title>
	</head>
	<body>
	<h1>Observable Example</h1>
	<script type="text/javascript" src="/index.js"></script>
	<script type="text/javascript" src="/example.js"></script>
	</body>
	</html>
	function Observable(val) {

	var listeners = [];

	observe.set = function(nv) {
	val = nv;

	listeners.forEach(function(l) {
	l(val);
	});
	}

	return observe;

	function observe(fn) {

	if(!fn) {
	return val;
	}

	listeners.push(fn);

	return function remove() {

	for(let i =0; i < listeners.length; i++) {
	if(listeners[i] === fn) {
	listeners.splice(i, 1);
	console.log(listeners);
	break;
	}
	}
	}
	}
	}

	window.Observable = Observable;