使用Jade模板引擎计算总数

Question

我需要为购物篮添加总金额，但我不知道如何在jade中实现这一点。

这是我认为可以实现的方法，但它不起作用，我尝试过的其他方法都会出现错误。

有人知道我该如何做吗？

each item in bagItems
    - var total = total + item.realprice
p= total

- jamcoupe

Answer 1

使用数组的reduce方法应该很容易实现。

p= bagItems.reduce(function(total, item) { return total + item.realprice; }, 0)

- Prestaul

Answer 2

Prestaul的reduce答案是一个好的解决方案，但我想回答一下，以便让你更深入地了解发生了什么。
问题在于，在each循环内创建的变量在循环外部不可用。在JavaScript中，您的代码将如下所示：

bagItems.forEach(function(item) {
    var total = total + item.realprice;
});
write("<p>" + total + "</p>");

我假设你熟悉JS的变量作用域，但基本上在函数内定义的var在外部是不可访问的。

第二个问题是你把total定义为它自己加上其他东西，但你从未给它一个初始值，所以它最终会成为undefined + item.realprice，这是NaN。

这里是另一种解决方案，可以解决这两个问题：

- var total = 0
each item in bagItems
    - total += item.realprice
p= total

- Nathan Friedly

Answer 3

通常情况下，你不会在任何模板语言中直接操作数据。在你的应用程序中计算总数，并将变量传递给模板。

- Adam Hopkinson

---

@adam，我同意通常情况下你应该避免在模板中进行数据操作，但我认为与显示相关的逻辑应该放在模板中，而不是控制器中，就像业务逻辑不应该放在模板中一样。我认为这是一个很好的例子，其中用于显示的数据已经存在（求和不属于数据操作），你的控制器无需调整数据结构以适应你现在想要显示的方式。下一步是控制器为元素生成HTML类名。 - Prestaul

@adam，我同意业务逻辑和数据操作不应该放在模板中。我希望清楚地表达我的意思是，我认为可能会过分追求这个理想。这种思路的逻辑终点就是Mustache。我知道有很多纯粹主义者认为Mustache（无逻辑模板）是理想的体现，但我相信许多人发现无逻辑模板实际上迫使他们将本应放在模板中的逻辑放在其他地方。 - Prestaul

@Prestaul说得很有道理，但该死的！点赞让我超过了10k（你好，版主工具！），而踩让我又回到了低于这个数字 :S - Adam Hopkinson

@adam：哈哈！噢！但这引发了一个有趣的问题...那么，当你达到10k时他们给予你权利...但当你再次低于10k时，他们会收回这些权利吗？ - Prestaul