如何通过字符串变量动态访问Handlebars中的变量？

我正在开发使用Handlebars模板存储内部变量的HTML代码，对Handlebars不太熟悉，表述若有错误请见谅。我的需求是：有大量需要通过Handlebars访问的变量，希望借助存储所有变量名的字符串数组来实现访问。

原本我可以硬编码逐个编写，例如：
A = {{variable0}}; B = {{variable1}}
以此类推直到variablen。但我想通过循环来完成这个操作，类似如下代码：

for (var i = 0; i <  n; i++) {
   result[i] = 'variable' + i
}
A = {{result[0]}};
B = {{result[1]}};

我原本期望{{result[0]}}能和{{variable0}}等价，但实际并非如此。请问是否有办法通过存储在变量中的字符串实现该需求？

解决方案 #

Handlebars本身不支持直接通过字符串变量名访问上下文属性，你可以通过自定义Helper来实现这个功能：

1. 注册自定义Helper
   在JavaScript中注册一个getVar Helper，用于根据字符串键名获取对应变量：

Handlebars.registerHelper('getVar', function(varName) {
  return this[varName];
});

2. 在模板中使用Helper
   假设存储变量名的数组result已传入模板上下文，你可以这样调用Helper来访问变量：

A = {{getVar result.[0]}};
B = {{getVar result.[1]}};

如果需要批量生成赋值语句，还可以结合Handlebars的#each循环遍历变量名数组：

{{#each result}}
  var {{this}} = {{getVar this}};
{{/each}}

这样就能通过字符串数组里的变量名，动态获取对应的Handlebars变量值。

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