shawndumas/boundHelper.html

## boundHelper.html
<html>
  <head>
    <style>
      b {
        font-weight: normal;
      }
    </style>
    <script src="http://cdn.jsdelivr.net/handlebarsjs/2.0.0/handlebars.js"></script>
  </head>
  <body>
    <div/>

    <script id="bound-template" type="text/x-handlebars-template">
      going up?&nbsp;{{bound floor}}<br/>
      message:&nbsp;{{bound message}}
    </script>

    <script>
      Handlebars.registerHelper('bound', (function () {
        var uniq = 0;

        return function (value) {
          var id = '__uniq__' + (++uniq),
              name;

          for (name in this) {
            if (this.hasOwnProperty(name)) {
              if (this[name] === value) {
                break;
              }
            }
          }

          Object.observe(this, function (changes) {
            document.getElementById(id).innerText = changes
              .filter(function (change) {
                return change.name === name;
              })
              .shift()
              .object[name];
          });

          return new Handlebars.SafeString(
            '<b id="' + id + '">' +
              value +
            '</b>'
          );
        };
      }()));

      var o = { floor: 1, message: 'inital' },
          t = Handlebars.compile(document.getElementById('bound-template').innerHTML);

      document.querySelector('div').innerHTML = t(o);

      window.setInterval(function () { o.floor += 1; }, 1000);
    </script>
  </body>
</html>
	<html>
	<head>
	<style>
	b {
	font-weight: normal;
	}
	</style>
	<script src="http://cdn.jsdelivr.net/handlebarsjs/2.0.0/handlebars.js"></script>
	</head>
	<body>
	<div/>

	<script id="bound-template" type="text/x-handlebars-template">
	going up? {{bound floor}}<br/>
	message: {{bound message}}
	</script>

	<script>
	Handlebars.registerHelper('bound', (function () {
	var uniq = 0;

	return function (value) {
	var id = '__uniq__' + (++uniq),
	name;

	for (name in this) {
	if (this.hasOwnProperty(name)) {
	if (this[name] === value) {
	break;
	}
	}
	}

	Object.observe(this, function (changes) {
	document.getElementById(id).innerText = changes
	.filter(function (change) {
	return change.name === name;
	})
	.shift()
	.object[name];
	});

	return new Handlebars.SafeString(
	'<b id="' + id + '">' +
	value +
	'</b>'
	);
	};
	}()));

	var o = { floor: 1, message: 'inital' },
	t = Handlebars.compile(document.getElementById('bound-template').innerHTML);

	document.querySelector('div').innerHTML = t(o);

	window.setInterval(function () { o.floor += 1; }, 1000);
	</script>
	</body>
	</html>