ノード/ Pug/Jade変数に補間する

Question

ノードアプリケーションのビューに渡されるデータはたくさんあります。その中の一番のものは予算、具体的には見積もりと実際の関係です。

変数は、すべてのコスト配管、私はすべてのコスト「タイプ」で構成し、それらを反復私のパグテンプレートでカスタムアレイを作成したいこの

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

のように、同様の名前が付けられます変数名に入力します。基本的にはこのような何か：

​​

アイデアは、それは私の配列内のすべての項目をループし、費用の私のテーブルを構築するための適切なHTMLをまとめるということで。私はそれを直接いくつかの異なる方法で配管しようとしましたが、運はありません。サンプル...

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

他にもいくつかの変形があります...すべて運がありません。これが可能なのか、それをどうやって行うのか？

Answer 1

evalは、動的な名前の変数を取得する必要があります。そして、あなたはケースを一致させるために.toLowerCaseを使用することができます。ユーザーがexpenseArrayの値を指定することができた場合

- 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は、セキュリティ上の問題を引き起こす可能性があります。そのユーザーは、そのページにアクセスしたすべてのユーザーに対して任意の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}