Question

我正在Meteor中构建一个简单的订购应用程序，即使我可以将它作为真正的号码登录控制台，它也会尝试获取订单总数 - 它正在呈现为NaN。任何帮助将不胜感激。

请注意，个别产品的总数似乎正常。

我有以下文件：

meteorder /客户端/模板/命令/ 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 /客户端/模板/命令/ 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 /客户端/ LIB / main.js：

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

meteorder /服务器/ 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

提前致谢！

编辑：

为马蒂亚斯添加此内容：

    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的缩小过程可能会导致部署问题。

Meteor在浏览器中返回NaN

2 个答案: