javascript - 初始加载后 Child_Added 不再返回完整数据

Question

我有一个网站，用户可以通过选择菜单中的项目来下订单。

它的设置是为了让您按下菜单页面上的“下订单”按钮

http://www.waipahe.co.uk/takeaway/menu.html

然后已下的订单将出现在订单页面上。

http://www.waipahe.co.uk/takeaway/orders.html

首次加载orders.html页面时，它会正常显示所有数据。但任何后续添加的子项都不会加载其余数据，或者不会显示它。如果我刷新orders.html页面，所有内容都会再次加载。

我可能错过了一些非常简单的东西，但我似乎无法找到我在哪里犯了错误。

编辑:orders.html 网页中的代码。

var base = new Firebase('https://takeaway.firebaseio.com/');

base.child('orders').on('child_added', function(snapshot) {     

    var orderData = snapshot.val();


    var contactName = orderData.ContactName; 
    var contactNumber = orderData.ContactNumber; 
    var orderTotal = orderData.TotalCost; 

    var order ="<div class='openOrder><span class='name'>"+contactName+"</span><span class='number'>"+contactNumber+"</span></div><div class='orderItems'>";

    var itemsnapshot = snapshot.child('items');

    itemsnapshot.forEach(function(itemshot){
        var itemData = itemshot.val();

        var itemCost = itemData.cost;
        var itemName = itemData.name;

        order = order + "<div class='orderItem'><span class='itemName'>"+itemName+"</span><span class='itemCost'>"+itemCost+"</span><div class='itemOptions'>";

        var optionsnapshot = itemshot.child('options');

        optionsnapshot.forEach(function(optionshot){
            var optiData = optionshot.val();

            var optiCost = optiData.cost;
            var optiName = optiData.name;

                order = order + "<div class='itemOption'><span class='optiName'>"+optiName+"</span><span class='optiCost'>"+optiCost+"</span>";
        });

        order = order + "</div></div>"

    });
    order = order + "</div><div><span class='total'>"+orderTotal+"</span></div>"
    $('#orders').append(order);
});

Answer 1

tl;博士

在 Firebase 中，仅添加子项时，child_added 事件才会触发。当子级稍后更新时，value 事件会在子级上触发。

导致您出现问题的原因

在 menu.html 中，您首先推送新订单，然后填充订单的项目:

    var details = base.child('orders').push({ContactName: ContactName, ContactNumber: ContactNumber, TotalCost:totalCost});
    var detailRef = details.name();

    $('#selected > .chosenItem').each(function(){
        var itemName = $(this).children(".title").text();
        var itemCost = $(this).children(".cost").text();
        var itemOpts = $(this).children(".chosenOpts");

在orders.html中，您监听订单上的child_added并显示详细信息:

base.child('orders').on('child_added', function(snapshot) {     

    var orderData = snapshot.val();

    var contactName = orderData.ContactName; 
    var contactNumber = orderData.ContactNumber; 
    var orderTotal = orderData.TotalCost; 

    var order ="<div class='openOrder'><span class='name'>"+contactName+"</span><span class='number'>"+contactNumber+"</span></div><div class='orderItems'>";

    var itemsnapshot = snapshot.child('items');

    itemsnapshot.forEach(function(itemshot){

您的 on('child_added'' 在添加新订单时触发。此时新订单的项目尚未填写，因此没有任何内容可显示。

当您添加商品时，child_added 事件不会在 orders 上再次触发，因为没有新订单。

可能的解决方案

解决方案是首先在 menu.html 中编写完整的订单，然后将其推送到 Firebase。由于您可以将任意复杂的 JavaScript 对象发送到 Firebase，因此您的数据结构将保持不变。

简化示例:

var order = { ContactName: ContactName, ContactNumber: ContactNumber, TotalCost:totalCost };
order.Items = [];
$('#selected > .chosenItem').each(function(){
    var itemName = $(this).children(".title").text();
    var itemCost = $(this).children(".cost").text();
    order.Items.push({ name:itemName, cost:itemCost });
});
base.child('orders').push(order);

另一个优点是，这将为您节省客户端和服务器之间的大量往返次数。