Question

我有一个使用旧式XMLHttpRequest工作的把手模板，可以从https://learnwebcode.github.io/json-example/pets-data.json获取JSON数组。以下是该工作代码。但是我的Firebase中的JSON看起来有所不同，如下所示：http://pastebin.com/JaYVVzwN。我的每个条目也有一个键，而LearnWebCode JSON只是一个数组。我也缺少父键（'Projects'），这进一步使转换变得复杂。我想这可能是由于与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键下的每个项目）< / p>

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

要明确的是，我希望我的页面可以填充一堆这些卡（我使用语义UI），用于Projects键下的每个项目（Project-1，Project-2，Project-3等）。）从单个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

你的火力群数据的形状不同于＆＃34;宠物＆＃34;数据。（假设compiledTemplate采用数组参数）

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

模板#each帮助器期望一个数组迭代。

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

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

此外，您需要更新模板以使用firebase数据中的实际属性，而不是＆＃34; pets＆＃34;数据

如果您需要在模板中引用对象ID（例如Project-2），则可以执行以下操作：

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

只会将dataObj中的属性复制到新的{}对象中，并添加id字段。

这是一个很好的javascript参考：

Object.keys

Array.prototype.map

Object.assign

从Firebase JSON制作把手模板

1 个答案: