Handlebars中#each助手无法遍历含方括号的键的问题排查

这不是Bug，是Handlebars的语法使用问题！当你用{{'tools[]'}}时，Handlebars会把它当作字符串字面量去匹配对象的键，所以能正常取值；但{{#each 'tools[]'}}的写法不对——#each期望接收的是上下文里的变量引用，而不是字符串字面量，所以它会尝试遍历字符串"tools[]"本身（也就是每个字符），而不是你想要的数组，自然看不到预期的结果。

给你两个可行的解决方案，不用修改表单或JSON键：

方案1：使用this['键名']的方式访问数组 #

直接在#each里通过上下文对象的方括号语法来访问带特殊字符的键，模板代码改成这样：

{{#each this['tools[]']}}
  <p>{{this}}</p>
{{/each}}

这里的this代表当前模板的上下文对象，用['tools[]']就能精准定位到你要遍历的数组，完全符合Handlebars的语法规则。

方案2：后端给键加别名（更优雅） #

如果觉得模板里写this['tools[]']不够简洁，可以在Express渲染模板前，把req.body['tools[]']赋值给一个更简洁的键，比如：

// 后端路由里的渲染代码
res.render('your-template', {
  tools: req.body['tools[]'], // 给带方括号的键加个别名
  // 其他模板需要的变量...
});

之后模板里就可以用更清爽的写法遍历：

{{#each tools}}
  <p>{{this}}</p>
{{/each}}

这个方案不需要修改前端表单，只是在后端做一层映射，成本很低，还能让模板代码更易读。

内容的提问来源于stack exchange，提问作者Břeťa