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

Question

有一个网页使用 Handlebars 填充了 JSON 文件的内容（非常感谢 user6709129 对这项技术的详细解释：).

所以我有：

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

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

Answer 1

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

调用可能类似于

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

contentPrepare(jsonDir, templId, finId);

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

A function that compiles the JSON content with Handlebars templates is not working (syntax error?)

javascript

ajax

json

commonjs

node.js