流星在浏览器中返回 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');
}
});

这是link到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}} 等...

Answer 2

您的值呈现为 NaN，因为 orderCart 是 undefined。

您可以定义一个单独的助手来修复您的代码：

Template.order.helpers({
    orderItems: function () {
        return OrderItems.find().map((orderItem) => {
            let product = Products.findOne({
                _id: orderItem.product
            });
            if (product) {
                orderItem.productname = product.description;
                orderItem.price = calcPrice(product, orderItem);
                return orderItem;
            }
        });
    },
    orderCart: function () {
        let orderCart = {subtotal: 0};
        OrderItems.find().forEach((orderItem) => {
            let product = Products.findOne({
                _id: orderItem.product
            });
            if (product) orderCart.subtotal += calcPrice(product, orderItem);
        });
        orderCart.tax = orderCart.subtotal * .23;
        orderCart.total = orderCart.subtotal + orderCart.tax;
        return orderCart;
    }
});

function calcPrice(product, orderItem) {
    return (Number(product.price) * orderItem.qty);
}

<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}}
        {{#with orderCart}}
            <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>
        {{/with}}
        </tbody>
    </table>
</template>

请注意：我注意到很多分号丢失了。我强烈建议解决这个问题，因为这可能会由于 Meteor 的缩小过程而导致部署出现几个问题。

流星在浏览器中返回 NaN

Meteor returning NaN in the browser

javascript

nan

meteor