Working with Handlebar.js
handlebars.js, javascript
Solution
`"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
Problem
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.