Skip to content

Instantly share code, notes, and snippets.

@cshimy cshimy/index.html
Created Sep 15, 2012

Embed
What would you like to do?
Render
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.