Handlebars not displaying the content

So I am starting with Handlebars.js and I don't really know the ins and outs. Please be patient with me.

I have three files, test.html, test.js and data.js. I want test.html to display the data in data.js, through the Handlebars in test.js. However, no content can be seen. I think the solution probably lies in calling a function somewhere, but I don't know what function, nor where.

Here are the codes:

test.html

<head>
  <script src="js/jquery.js">
  </script>
  <script src="js/handlebars-v3.0.3.js">
  </script>
  <script src="test.js">
  </script>
  <script src="data.js">
  </script>
  <script src="js/bootstrap.js">
  </script>
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/gallery.css" rel="stylesheet">
</head>
<body>
  <script id="image-templatexxx" type="text/x-handlebars-template">
    {{name}}</br>
    {{author}}</br>
    <img style="height:600" src="{{src}}" />
  </script>
  <div id="test-content">
  </div>
</body>

data.js

var testdata = {
  src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
  name: "The Earth seen from Apollo 17",
  author: "Ed g2s"
};

test.js

var source   = $("#image-templatexxx").html();
var testtemplate = Handlebars.compile(source);
var testhtml    = testtemplate(testdata);
$('#test-content').html(testhtml);

Thanks a lot for this.

Solution

Please include data.js before test.js. Otherwise testdata is undefined at the time of generating the html string using handlebars. The below code

$(document).ready(function() {
  var testdata = {
    src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
    name: "The Earth seen from Apollo 17",
    author: "Ed g2s"
  };
  var source = $("#image-templatexxx").html();
  var testtemplate = Handlebars.compile(source);
  var testhtml = testtemplate(testdata);

  $('#test-content').html(testhtml);
});

Works for me.