2016-08-28 5 views
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コードをラップしたい:

  1. パスJSONファイルへ
  2. Idをハンドルバーのテンプレート
  3. 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ファイルにコンパイルされます。

+0

ようになります(それが持つ機能の全体の目的です)を呼び出す必要があります正確には意味しない?あなたは 'contentPrepare'関数を呼び出しますか? – zerkms

+0

@zerkms '

関連する問題