javascript - Meteor 在浏览器中返回 NaN

Question

我正在 Meteor 中构建一个简单的订购应用程序，并且尝试获取订单总数，尽管我可以让它以真实数字的形式登录控制台 - 它被渲染为 NaN。任何帮助将不胜感激。

请注意，各个产品的总计显示良好。

我有以下文件:

meteorder/client/templates/orders/order_build.js:

Template.order.helpers({
'orderitems': function() {
    var orderCart = [];
    var orderItems = OrderItems.find({});
    var total = 0;

    orderItems.forEach(function(orderItem) {
        var item = _.extend(orderItem, {});
        var product = Products.findOne({
            _id: orderItem.product
        });
        orderItem.productname = product.description;
        orderItem.price = (Number(product.price) * orderItem.qty);
        total += orderItem.price;
        orderCart.push(orderItem);
    });

    orderCart.subtotal = total;
    orderCart.tax = orderCart.subtotal * .23;
    orderCart.total = orderCart.subtotal + orderCart.tax;
    return orderCart;

}
})

meteorder/client/templates/orders/order_build.html:

<template name="order">
    <div class="page-header">
        <h1>
            <small>My Order</small>
        </h1>
    </div>
    <table class="span4 table table-striped table-bordered table-hover">
        <thead>
        <th>Qty</th>
        <th>Product</th>
        <th>Price</th>
        <th></th>
        </thead>
        <tbody>
        {{#each orderitems}}
        <tr>
            <td>{{qty}}</td>
            <td>{{productname}}</td>
            <td>{{currency price}}</td>
            <td><span class="label-important label removeci">X</span></td>
        </tr>
        {{else}}
        <tr>
            <td colspan="3">No Products in Order</td>
        </tr>
        {{/each}}
        <tr>
            <td class="totalcol" colspan="2">SubTotal:</td>
            <td colspan="2">{{currency orderCart.subtotal}}</td>
        </tr>
        <tr>
            <td class="totalcol" colspan="2">Tax 6%:</td>
            <td colspan="2">{{currency orderCart.tax}}</td>
        </tr>
        <tr>
            <td class="totalcol" colspan="2">Total:</td>
            <td colspan="2">{{currency orderCart.total}}</td>
        </tr>
        </tbody>
    </table>

</template>

meteorder/client/lib/main.js:

Template.registerHelper('currency', function(num){
  return '€' + Number(num).toFixed(2);
});

meteorder/server/server.js:

Meteor.methods({

addToOrder:function(qty,product,session){
    check(qty, Number);
    check(product, String);
    check(session, String);
    if(qty > 0){
        OrderItems.insert({qty:qty,product:product,sessid:session});
        console.log('reaching this fn', typeof qty, typeof product,      typeof session);

    } else{
        console.log('Quantity is Zero');
    }

},
removeOrderItem:function(id){
     check(id, String);
    OrderItems.remove({_id:id});
    console.log('successfully deleted');
}
}); 

这里是 GitHub repo 的链接

以及最新版本的deployed App

提前致谢!

编辑:

只需为 Matthias 添加以下内容:

    Template.productItem.events({
'click .addOrder':function(evt,tmpl){
  var qty1 = tmpl.find('.prodqty').value;
  var qty = parseInt(qty1);
    var product = this._id;
    var sessid = Meteor.default_connection._lastSessionId; //stops others  adding to your cart etc

    Meteor.call('addToOrder',qty, product, sessid);
     console.log('this is the quantity:', typeof qty, product, sessid);//stops others  ad
}
}); 

看看它是否可以更好地了解购物车未填充的原因。谢谢

Answer 1

您尝试将 orderCart 用作对象数组和对象。您将一堆 orderItem 对象插入数组，但最后您尝试设置 orderCart.subtotal 等...

更改您的助手以拥有单独的摘要对象:

var summary = {};
summary.subtotal = total;
summary.tax = summary.subtotal * .23;
summary.total = summary.subtotal + summary.tax;
return {items: orderCart, summary: summary}

然后在你的 html 中执行:

{{#each orderitems.items}}
...
{{/each}}

最后在您的摘要行中使用 {{currency orderitems.summary.tax}} 等...