Menu
I was actually trying to find some tutorials on Handlebar.js & I found this http://javascriptplayground.com/blog/2012/05/javascript-templating-handlebars-tutorial
But it is not actually working as expected.
What I am doing is I have an index.html file,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js" type="text/javascript" charset="utf-8"></script>
<script src="app.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Messing with Handlebars</title>
</head>
<body>
<script id="ajax-comment" type="text/x-handlebars-template">
<li>
<span class="meta">{{name}} on {{date}}</span>
<p>{{comment}}</p>
</li>
</script>
</body>
</html>
and an app.js which contains the code.
var source = $("#ajax-comment").html();
var template = Handlebars.compile(source);
var data = {
name : "Jack",
date : "12/04/12",
comment : "This is a really awesome tutorial. Thanks."
};
$("ul").append(template(data));
But all I am getting is a blank page. Any mistake I am making here? Detailed explanations would be helpful.
579
Handlebars doesn't allow you to write JavaScript directly within templates. Instead, it gives you helpers. These are JavaScript functions that you can call from your templates, and help you reuse code and create complex templates. To call a helper, just use it as an expression - {{helpername}} .
Handlebars. js is a Javascript library used to create reusable webpage templates. The templates are combination of HTML, text, and expressions. The expressions are included in the html document and surrounded by double curly braces.
Handlebars Awards3rd most popular in the Top 10k sites in Framework category. 3rd most popular in the Top 100k sites in Framework category.
Handlebars is popular for both back-end and front-end templating. For example, the popular front-end framework Ember uses Handlebars as the templating engine. Handlebars is an extension of the Mustache template language, which is mostly focused on simplicity and minimal templating.
"ul" element doesn't exist, you must append it to something which actually exists.
just add a <ul></ul> somewhere in the body.
fiddle here
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
