从 Firebase JSON 制作 Handlebars 模板

Question

我有一个车把模板，它使用老式的 XMLHttpRequest 从https://learnwebcode.github.io/json-example/pets-data.json 获取 JSON 数组。下面是它的工作代码。但我从 Firebase 获取的 JSON 看起来不同，如下所示：http://pastebin.com/JaYVVzwN。我的每个条目也有一个键，而 LearnWebCode JSON 只是一个数组。我的也缺少父键（“项目”），这使过渡更加复杂。我认为这可能是由于const dbRefObject = firebase.database().ref().child('Projects'); 的行（请参阅我发布我尝试的javascript的最底部）

handlebars-project.js：老式的 XMLHttpRequest

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

这是工作的 HTML/Handlebars 代码：

card-handlebars.php: 我想使用的基本模板（它制作了一张小卡片。我想要很多这样的，一个用于 Firebase JSON 的 Projects 键下的每个项目）

<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。

明确地说，我希望我的页面为 Projects 键下的每个项目（Project-1、Project-2、Project-3 等）填充一堆这些卡片（我正在使用语义 UI）。 ) 从单个 Firebase 提取。它已经被字符串化为 JSON。我希望循环保留在车把（HTML）中，而不是 javascript 中。这不是使用 Node.js。

这是我实际的 Firebase 表：

这是我对 javascript 的尝试：

handlebars-firebase-project.js： 不工作。这就是整个问题的症结所在。这应该是一个简单的修复，但我不是 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;

  });

}());

Answer 1

您的 Firebase 数据的形状与“宠物”数据不同。 （假设compiledTemplate 接受一个数组参数）

firebase 结果是一个对象，而 pets 是一个数组。

模板#each 助手期望一个数组进行迭代。

您可以将 firebase 对象结果转换为数组：

var dataObj = snap.val()
var dataArray = Object.keys(dataObj).map(function(key) {
  return dataObj[key]
})
var ourGeneratedHTML = compiledTemplate(dataArray);

此外，您需要更新模板以使用 Firebase 数据中的实际属性，而不是“宠物”数据。

如果您需要在模板中引用对象 ID（例如 Project-2），您可以这样做：

return Object.assign({}, dataObj, {id: key})

它只是将属性从dataObj 复制到一个新的{} 对象中，并添加id 字段。

这是一个很好的 javascript 参考：

Object.keys

Array.prototype.map

Object.assign