cshimy/index.html

## index.html
<html>
<head>
  <title>Sample</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  	$(document).ready(function () {

  		var RenderMaster = function () {

  			var _this = this;
  			_this.renderer = [];

  			console.log("Init");

  			_this.register_renderer = function (key, func) {
  				console.log("Registering Renderer: " + key);
  				_this.renderer.push({ key: key, func: func });
  			}

  			_this.display = function (data) {
  				console.log("Display");
  				for (var i = 0; i < _this.renderer.length; i++) {
  					if (data[_this.renderer[i].key]) {
  						_this.renderer[i].func(data);
  					}
  				}
  			}
  		};

  		var presenter = new RenderMaster();

  		presenter.register_renderer('base', function (data) {
  			console.log("Rendering base...");

  			var source = $("#entry-template").html();
  			var template = Handlebars.compile(source);
  			var html = template(data.base);
  			$("#programDetails").html(html);
  		});

  		presenter.register_renderer('dvr', function (data) {
  			console.log("Rendering dvr...");
  			if (data.dvr.isScheduled) {
  				$('#dvr').html("Get the popcorn.");
  			} else {
  				$('#dvr').html("Get dressed and go out.");
  			}
  		});

  		var context = {
  			base: {
				programTitle: "Arrested Development",
  				episodeTitle: "Top Banana",
  				duration: 60,
  				rating: "TV-14",
  				channel: "FOX"
  			},
  			dvr: { isScheduled: true }
  		};

  		presenter.display(context);

  	});

  </script>

  <script id="entry-template" type="text/x-handlebars-template">
	<div>
		<h1>{{programTitle}}</h1>
		<h2>{{episodeTitle}}</h2>
		<div><b>{{duration}}</b> {{rating}}, {{channel}}</div>
	</div>
  </script>

</head>
<body>
  <h1>Sample</h1>
  <div id="programDetails">Reading...</div>
  <div id="dvr">Reading...</div>
</body>
</html>
	<html>
	<head>
	<title>Sample</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js" type="text/javascript"></script>
	<script type="text/javascript">

	$(document).ready(function () {

	var RenderMaster = function () {

	var _this = this;
	_this.renderer = [];

	console.log("Init");

	_this.register_renderer = function (key, func) {
	console.log("Registering Renderer: " + key);
	_this.renderer.push({ key: key, func: func });
	}

	_this.display = function (data) {
	console.log("Display");
	for (var i = 0; i < _this.renderer.length; i++) {
	if (data[_this.renderer[i].key]) {
	_this.renderer[i].func(data);
	}
	}
	}
	};

	var presenter = new RenderMaster();

	presenter.register_renderer('base', function (data) {
	console.log("Rendering base...");

	var source = $("#entry-template").html();
	var template = Handlebars.compile(source);
	var html = template(data.base);
	$("#programDetails").html(html);
	});

	presenter.register_renderer('dvr', function (data) {
	console.log("Rendering dvr...");
	if (data.dvr.isScheduled) {
	$('#dvr').html("Get the popcorn.");
	} else {
	$('#dvr').html("Get dressed and go out.");
	}
	});

	var context = {
	base: {
	programTitle: "Arrested Development",
	episodeTitle: "Top Banana",
	duration: 60,
	rating: "TV-14",
	channel: "FOX"
	},
	dvr: { isScheduled: true }
	};

	presenter.display(context);

	});

	</script>

	<script id="entry-template" type="text/x-handlebars-template">
	<div>
	<h1>{{programTitle}}</h1>
	<h2>{{episodeTitle}}</h2>
	<div><b>{{duration}}</b> {{rating}}, {{channel}}</div>
	</div>
	</script>

	</head>
	<body>
	<h1>Sample</h1>
	<div id="programDetails">Reading...</div>
	<div id="dvr">Reading...</div>
	</body>
	</html>