0
Handlebarsを使用してJSONファイルのコンテンツで埋め込まれたWebページがあります(この詳細はuser6709129ありがとう技術:https://stackoverflow.com/a/38947838/6530539)。Handlebarsテンプレートを使用してJSONコンテンツをコンパイルする関数が動作しません(構文エラー?)
だから私は持っている:
- 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);
})
それは素晴らしい作品!
今、私は三つの変数を使用すること、(のはcontentPrepare
それを呼びましょう)機能にJavascriptコードをラップしたい:
- パスJSONファイルへ
- Idをハンドルバーのテンプレート
- addContent.jsを - コンテンツが
を配置する必要がありディビジョンIdはその後、私は他のJavaScriptファイルでこの機能を使用したいですは、この関数をさまざまな変数で何度も使用し、コンテンツをサイトに埋め込みます。
私のテストの例ではうまくいかないのはなぜですか?
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モジュールとして接続され、Browserifyを使用して1つのJavascriptファイルにコンパイルされます。
ようになります(それが持つ機能の全体の目的です)を呼び出す必要があります正確には意味しない?あなたは 'contentPrepare'関数を呼び出しますか? – zerkms
@zerkms '