如何在Handlebars中获取动态命名变量？表格场景解决方案求助

嘿，这个场景我太熟悉了！Handlebars默认不支持像JS里row[col.name]那样直接用变量作为属性名访问，但有两个简单的解决方案，完全能满足你的需求：

方案1：用Handlebars内置的lookup助手（最便捷） #

Handlebars其实自带了一个专门处理动态属性/索引的lookup助手，刚好能解决你的问题，不用自己写额外代码。直接把模板改成这样就行：

{{#rows as |row|}}
  <tr>
    {{#../cols as |col|}}
      <td>{{lookup row col.name}}</td>
    {{/../cols}}
  </tr>
{{/rows}}

lookup的逻辑很简单：第一个参数是目标对象（这里就是每一行的row），第二个参数是你要访问的属性名（col.name），它会帮你返回row[col.name]对应的值，完美匹配你要的JS写法。

如果担心某些属性不存在会显示空白，还可以加个默认值兜底：

<td>{{lookup row col.name}} || '-' </td>

方案2：自定义一个获取属性的助手（更灵活） #

如果需要更定制化的逻辑（比如处理复杂的嵌套属性、默认值逻辑），可以自己注册一个助手函数。在你的JS代码里添加：

Handlebars.registerHelper('getProp', function(obj, propName) {
  // 这里可以加自定义逻辑，比如判断属性是否存在
  return obj && obj[propName] ? obj[propName] : '无数据';
});

然后在模板里调用这个自定义助手：

{{#rows as |row|}}
  <tr>
    {{#../cols as |col|}}
      <td>{{getProp row col.name}}</td>
    {{/../cols}}
  </tr>
{{/rows}}

这个方案适合需要额外逻辑处理的场景，比如统一处理空值、转换数据格式等。

两种方案都能解决你的问题，推荐优先用内置的lookup，因为更简洁省心～

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