Javascript 把手不显示内容

所以我从handlebar.js开始，我不太了解细节。请对我耐心点

我有三个文件，test.html、test.js和data.js。我希望test.html通过test.js中的把手在data.js中显示数据。但是，看不到任何内容。我认为解决方案可能在于调用某个函数，但我不知道是什么函数，也不知道在哪里

代码如下：

test.html

{{name}}

{{作者}

请在test.js之前包含data.js。否则，testdata在使用Handlebar生成html字符串时未定义。下面的代码

$(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);
});   

---

对我有用

在Test.js之前包含DAT.JS，并考虑在文档中准备好代码。@ HectorBarbossa，你介意准备一个完整的答案吗？