JSON配列をhttps://learnwebcode.github.io/json-example/pets-data.jsonから取得するために、旧式のXMLHttpRequestを使用してうまく機能したハンドルバーテンプレートがあります。以下はそのための作業コードです。しかしFirebaseのJSONは、次のように異なって見えます。http://pastebin.com/JaYVVzwN私のすべてのエントリにもキーがありますが、LearnWebCode JSONは単なる配列です。鉱山には親キー（ 'プロジェクト'）もありません。これは移行をさらに複雑にします。Firebaseからハンドルバーテンプレートを作成するJSON
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/pets-data.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var data = JSON.parse(ourRequest.responseText);
createHTML(data);
} else {
console.log("We connected to the server, but it returns an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
function createHTML (petsData) {
var rawTemplate = document.getElementById("petsTemplate").innerHTML;
var compiledTemplate = Handlebars.compile(rawTemplate);
var ourGeneratedHTML = compiledTemplate(petsData);
var petsContainer = document.getElementById("pets-container");
petsContainer.innerHTML = ourGeneratedHTML;
}
そして、ここだ昔ながらのXMLHttpRequest：私は
ハンドル-project.js（私は試みたのjavascriptを投稿一番下を参照）、それが原因const dbRefObject = firebase.database().ref().child('Projects');とラインにあるかもしれないと思っています作業HTML /ハンドルバーコード：
カード-handlebars.php：。私はそれが少しカードを作る（使用したい、私はこれらの多くを望ん基本テンプレート、項目ごとに1つのFirebaseからプロジェクトのキーの下にJSON）
<div class="ui stackable cards" id="pets-container"></div>
<script id="petsTemplate" type="text/x-handlebars-template">
{{#each pets}}
<div class="ui red card" id="ui_card">
<div class="content">
<div class="right floated header">
{{species}}
</div>
<div class="header">
<p>{{name}}</p>
</div>
</div>
<div class="content">
<div class="description">
<a href="project_details.php">
Description goes here. Some lorem ipsum should be fine here for now. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset. Lorem ipsum dolor mit aset.
</a>
</div>
</div>
<div class="extra content">
<span class="right floated" id="card_weeks_ago">
2 weeks ago
</span>
<img class="ui avatar image" src="/examples/assets/images/avatar/elliot.png"> Elliot Fu
</div>
</div>
{{/each}}
</script>
ここでは最初にhandlebars-project.jsコードをfirebaseを使用するように切り替える必要があります。
明確にするには、プロジェクトキー（Project-1、Project-2、Project-3など）の下にあるすべてのアイテムに対して、これらのカードが一杯になるように（私はセマンティックUIを使用しています） 。）を1つのFirebaseフェッチから取り出します。すでにJSONにストリングされています。私はループがJavaScript（JavaScript）ではなく、ハンドルバーに残るようにしたい。これはNode.jsを使用していません。
はここに私の実際のFirebase表を見ます：
ハンドル-firebase-project.js：が動作しない
ここではJavaScriptで私の試みです。これが問題全体の要点です。それは簡単な修正でなければならないが、私はJSの専門家ではない。
(function() {
// <script src="https://www.gstatic.com/firebasejs/3.7.1/firebase.js"></script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAC1MEF59loMVRA7zyaMhn6uHrp4i2OPNw",
authDomain: "website-171c8.firebaseapp.com",
databaseURL: "https://website-171c8.firebaseio.com",
storageBucket: "website-171c8.appspot.com",
messagingSenderId: "642759134369"
};
firebase.initializeApp(config);
//Create references
const dbRefObject = firebase.database().ref().child('Projects');
//Sync object changes (HTML)
dbRefObject.on('value', snap => {
var rawTemplate = document.getElementById("petsTemplate").innerHTML;
var compiledTemplate = Handlebars.compile(rawTemplate);
var ourGeneratedHTML = compiledTemplate(JSON.stringify(snap.val(), null, 3));
var petsContainer = document.getElementById("pets-container");
petsContainer.innerHTML = ourGeneratedHTML;
});
}());