将 JSON 文件中的数据加载到 Handlebars / MJML 模板中

Question

我有一个可编译为 HTML 的 MJML 模板，并且想要将变量从 JSON 文件加载到模板中。我对 HTML、JS 和 Handlebars 很陌生，所以这里可能真的偏离了轨道。

我的 MJML 模板test.mjml看起来像：

<mjml>    
<mj-body>
<mj-raw><script type="text/javascript" src="handlebars-v4.7.3.js"></script></mj-raw>  
<mj-raw><script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script></mj-raw>
  <mj-section>
    <mj-text><mj-raw>
      <script id="test-template" type="text/x-handlebars-template">
        <div>
        <p>
        Hello my name is {{name}}.
        </p>
        </div>
      </script>      
    </mj-raw></mj-text>
  </mj-column>
</mj-section>

我有一个 JSON 文件data.json：

{
 "name": "John",
 "height": "175cm",
 "occupation": "Teacher",
}

还有一个 JS 文件test.js：

$(document).ready(function() {  
    var template = $('#test-template').html();

    var compiledTemplate = Handlebars.compile(template);
    $.getJSON('data.json', function (data) {
        var context = data;
        }
});

var html = compiledTemplate(context);

$(document.body).append(html);

有谁知道该怎么做/我做错了什么？

如果我用内联 JSON 替换 jQuery 的 getJSON 方法，它就可以工作。