使用 Handlebars 模板编译 JSON 内容的函数不起作用（语法错误？）答案

【问题标题】：A function that compiles the JSON content with Handlebars templates is not working (syntax error?)使用 Handlebars 模板编译 JSON 内容的函数不起作用（语法错误？）
【发布时间】：2016-08-28 22:28:25
【问题描述】：

有一个网页使用 Handlebars 填充了来自 JSON 文件的内容（非常感谢 user6709129 对此技术的详细说明：https://stackoverflow.com/a/38947838/6530539）。

所以我有：

Index.html
content.JSON
contentProcessing.js

contentProcessing.js：

function sendGet(callback) {
    /* create an AJAX request using XMLHttpRequest*/
    var xhr = new XMLHttpRequest();
    /*reference json url taken from: http://www.jsontest.com/*/

    /* Specify the type of request by using XMLHttpRequest "open", 
       here 'GET'(argument one) refers to request type
       "http://date.jsontest.com/" (argument two) refers to JSON file location*/
    xhr.open('GET', "http://date.jsontest.com/");

    /*Using onload event handler you can check status of your request*/
    xhr.onload = function () {
        if (xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        } else {
            alert(xhr.statusText);
        }
    };

    /*Using onerror event handler you can check error state, if your request failed to get the data*/
    xhr.onerror = function () {
        alert("Network Error");
    };

    /*send the request to server*/
    xhr.send();
}

//For template-1
var dateTemplate = document.getElementById("date-template").innerHTML;
var template = Handlebars.compile(dateTemplate);

sendGet(function (response) {
    document.getElementById('testData').innerHTML += template(response);
})

效果很好！

现在我想将 Javascript 代码包装在一个函数中（我们称之为 contentPrepare），它使用三个变量：

JSON 文件的路径
Handlebars 模板的 ID
应放置内容的 Div Id

然后我想在另一个 Javascript 文件 - addContent.js 中使用这个函数，它会多次使用这个函数和不同的变量，从而用内容填充网站。

为什么它在我的测试示例中不起作用？

var jsonDir = "json/test.json";
var templId = "date-template";
var finId = 'testData';

function contentPrepare (jsonDir, templId, finId){
function sendGet(callback) {
    /* create an AJAX request using XMLHttpRequest*/
    var xhr = new XMLHttpRequest();
    /*reference json url taken from: http://www.jsontest.com/*/

    /* Specify the type of request by using XMLHttpRequest "open", 
       here 'GET'(argument one) refers to request type
       "http://date.jsontest.com/" (argument two) refers to JSON file location*/
    xhr.open('GET', jsonDir);

    /*Using onload event handler you can check status of your request*/
    xhr.onload = function () {
        if (xhr.status === 200) {
            callback(JSON.parse(xhr.responseText));
        } else {
            alert(xhr.statusText);
        }
    };

    /*Using onerror event handler you can check error state, if your request failed to get the data*/
    xhr.onerror = function () {
        alert("Network Error");
    };

    /*send the request to server*/
    xhr.send();
}

//For template-1
var dateTemplate = document.getElementById(templId).innerHTML;
var template = Handlebars.compile(dateTemplate);

sendGet(function (response) {
    document.getElementById(finId).innerHTML += template(response);
})
}

附言
最终，contentProcessing.js 和 addContent.js 将作为 commonJS 模块连接，并使用 Browserify 编译成单个 Javascript 文件。

【问题讨论】：

“不起作用”到底是什么意思？你甚至调用了contentPrepare 函数吗？
@zerkms 我使用<script type = "text / javascript" src = "contentProcessing.js"> 将contentProcessing.js 连接到index.html。然后它会自动运行：在第一个示例中，如果我运行本地 HTTP 服务器 (nodeJS) 并打开页面 localhost:8080 我会在页面上看到 JSON 内容（如它应该是）。如果我将 JSON 目录、Handlebars 模板 id 和 html div id 替换为 defined variables，我还会看到内容。但是如果我添加一行 function contentPrepare (jsonDir, templId, finId) {code here} - 我不再在页面上看到 JSON 内容。
所以，你将它包装在一个函数中。你在任何地方都叫它吗？
@zerkms 现在我明白我的错误了，谢谢！）
@zerkms 如果您要添加答案，我会接受。

标签： javascript json ajax node.js commonjs

【解决方案1】：

在你将所有逻辑封装到一个函数之后 - 你仍然应该调用它（这就是拥有函数的全部目的）

电话大概看起来像

var jsonDir = "json/test.json";
var templId = "date-template";
var finId = 'testData';

contentPrepare(jsonDir, templId, finId);

【讨论】：