如何在Handlebars/EJS模板中用一个对象属性值作为另一个对象属性？

嘿，这个问题我熟！你在Handlebars里想用循环的当前值作为另一个对象的属性名，原来的嵌套{{}}写法确实行不通——Handlebars的模板语法不允许在表达式里再套一层{{}}，直接写会触发语法错误。

我给你两种靠谱的解决办法，都能实现你要的Prices.a_CoinList_value.USD效果：

方法1：用Handlebars内置的lookup helper（推荐，兼容性更好） #

Handlebars自带的lookup helper就是专门用来动态查找对象属性的，它接收两个参数：目标对象和要查找的属性名，返回对应的属性值。我们可以先用它拿到Prices中对应当前this的子对象，再链式访问USD属性：

{{#each CoinList}}
  <h4>{{(lookup Prices this).USD}}</h4>
{{/each}}

如果你的Handlebars版本不支持括号链式访问，也可以嵌套使用lookup来获取USD：

{{#each CoinList}}
  <h4>{{lookup (lookup Prices this) 'USD'}}</h4>
{{/each}}

方法2：直接使用方括号语法（适合新版本Handlebars） #

如果你的Handlebars版本比较新（大概v4.0+），可以像原生JavaScript那样用方括号访问动态属性，写法更简洁：

{{#each CoinList}}
  <h4>{{Prices[this].USD}}</h4>
{{/each}}

举个实际的例子，假设你传入的数据是这样的：

const data = {
  CoinList: ['BTC', 'ETH', 'SOL'],
  Prices: {
    BTC: { USD: 32000 },
    ETH: { USD: 1800 },
    SOL: { USD: 90 }
  }
}

用上面的模板渲染后，就会生成三个<h4>标签，分别显示32000、1800和90，完全符合你的需求~

另外提醒一句：如果CoinList里可能存在Prices中没有的属性值，最好加个条件判断避免报错，比如：

{{#each CoinList}}
  {{#if (lookup Prices this)}}
    <h4>{{(lookup Prices this).USD}}</h4>
  {{else}}
    <h4>暂无价格数据</h4>
  {{/if}}
{{/each}}

内容的提问来源于stack exchange，提问作者MMH49