Node / Pug / Jade 插入变量

Question

我有一大堆数据被传递到 Node 应用程序中的一个视图，其中一大堆数据与预算有关，特别是报价与实际。

变量都以类似的方式命名，就像这样

s_budget_quote_labour = 500
s_budget_actual_labour = 400
s_budget_quote_food = 1000
s_budget_actual_food= 1100

我想在我的 Pug 模板中创建一个自定义数组，它包含所有成本“类型”，然后迭代它们，将成本类型传递到变量名称中。 基本上是这样的：

    - expenseArray = ['Food', 'Labor']
    - each expense, i in expenseArray
      - var expense_budget = 'info.s_budget_' + expense  
      - var expense_actual = 'info.s_actual_' + expense  
      tr
        td ${expense}
        td ${expense_budget}
        td ${expense_actual}

这个想法是它会遍历我数组中的所有项目，并将正确的 html 放在一起来构建我的费用表。 我也试过用几种不同的方式将它直接输送到 td 中，但没有运气。 样品...

td #{info.s_actual_${expense}}
td !{info.s_actual_${expense}}

和其他一些变体......都没有运气。 知道这是否可能以及如何做到吗？

Answer 1

eval应该让您获得具有动态名称的变量。 您可以使用.toLowerCase使大小写匹配：

- expenseArray = ['Food', 'Labor']
- each expense, i in expenseArray
  - var expense_budget = eval('info.s_budget_' + expense.toLowerCase())
  - var expense_actual = eval('info.s_actual_' + expense.toLowerCase())
  tr
    td ${expense}
    td ${expense_budget}
    td ${expense_actual}

但是，如果用户可以指定expenseArray的值，则eval可能会导致安全问题。 这些用户可能会导致访问该页面的任何人运行任意 JavaScript。 如果您需要该解决方案支持费用类型名称中的空格或特殊字符，则该解决方案还需要更多代码。 所以我不推荐这个。

相反，您应该更改发送到您的视图的info变量的格式。 使用特殊命名方案发送一个对象或Map ，而不是多个变量。 例如， info可能是这样的：

var info = {
  'Labour': {quote: 500, actual: 400},
  'Food': {quote: 1000, actual: 1100},
}

然后你的模板是这样的：

- expenseArray = ['Food', 'Labor']
- each expense, i in expenseArray
  - var expense_budget = info[expense].quote
  - var expense_actual = info[expense].actual
  tr
    td ${expense}
    td ${expense_budget}
    td ${expense_actual}