CODEWITHSUNDEEP
javascripthandlebars.js
user1601973
user1601973

Reputation: 572

Working with Handlebar.js

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.

Upvotes: 6

Views: 3443

Answers (3)

user1028089
user1028089

Reputation:

try putting ref to your external JS at bottom, just above the closing body tag

eg

<body>
    <ul></ul>
   <!-- last thing on the page--> 
   <script src="app.js" type="text/javascript"></script>
</body>

this seemed to have solved it for me

Upvotes: 0

boiledice
boiledice

Reputation: 33

You might want to check the answer to this question Seems like the jquery function was not able to access the element since the DOM wasnt loaded before the call was made. I tried some more combinations after the initial changes of calling the app.js code(without wrapping it inside a function) only after the DOM was loaded which worked. For example I moved the script call just before the </body> which worked too.

... <script src="app.js" type="text/javascript" charset="utf-8"></script> </body>

It also helped me to know whether we use HTML or XHTML as our document type, to understand this problem better.

Upvotes: 0

Austin Greco
Austin Greco

Reputation: 33554

"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

Upvotes: 3

Related Questions