Question

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

变量的名称都相似，如此

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}

但是，如果用户可以指定eval的值，expenseArray可能会导致安全问题。这些用户可能会为访问该页面的任何人生成任意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}

Node / Pug / Jade Interpolate into variable

1 个答案: