流星在瀏覽器中返回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的縮小過程而導致的部署問題。