流星在浏览器中返回NaN

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/client/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的缩小过程而导致的部署问题。