Thursday, November 12, 2015

jquery + handlebars boilerplate

4 years ago I put up an html5 boilerplate (including jquer, the syntax for the CSS link rel, etc) that I find useful when I want to do a quick and dirty one off; but a bit too dirty, since really it would be better to do handlebars rather than direct DOM manipulation (I think some coders are too quick to turn to big frameworks just to avoid the ugliness of dealing with DOM bits directly, but jQuery+handlebars is really powerful)

So here's the updated version:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MY PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
<script>
$(helloWorld); //on document ready...

function helloWorld(){
var helloWorldTemplate = Handlebars.compile($("#hello-world-template").html());
$("#main").html(helloWorldTemplate({"msg":"Hello World"}));
}
</script>
<script id="hello-world-template" type="text/x-handlebars-template">
<div>{{msg}}</div>
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>

No comments:

Post a Comment