CODEWITHSUNDEEP
handlebars.js
Thillai Narayanan
Thillai Narayanan

Reputation: 4886

data was not visible on browser when using handlebar.js

I was implementing handlebar.js for my sample app.As per the handlebar.js documentation, it tried with the example as mentioned. But the values are loaded on the dom inside the script, but not visible on browser.

HTML

<body>
<h1>Handlebar</h1>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
</script>
<script  src="js/jquery-1.8.3.min.js"></script>
<script  src="js/handlebars.js"></script>
<script  src="js/app.js"></script>
</body>

app.js

var source   = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);
$("#entry-template").html(template(context));

When the browser gets loaded i am getting a blank screen, but while debugging via firebug able to find the values title and body

Upvotes: 0

Views: 1062

Answers (1)

mu is too short
mu is too short

Reputation: 434665

You're replacing the content of a <script> element:

$("#entry-template").html(template(context));

and #entry-template is a <script>:

<script id="entry-template" type="text/x-handlebars-template">

Browsers don't display the content of <script>s with that type. You want to put your filled in template into something like a <div> that will be displayed:

<h1>Handlebar</h1>
<div id="html-goes-here"></div>

and then:

$("#html-goes-here").html(template(context));

Upvotes: 6

Related Questions