Question

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

设置为按下＆＃34;下订单＆＃34;菜单页面上的按钮

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中，您首先push新订单，然后填充订单的项目：

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

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

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

1 个答案:

TL;博士

导致问题的原因

可能的解决方案