Handlebars模板中{{#each products}}循环不生效问题求助

可能的原因及对应解决方法 #

1. 模板上下文路径错误（最高发） #

如果你的模板使用了嵌套的块助手（比如外层套了{{#if}}、{{#with}}）或者启用了布局模板，此时循环语句所在的上下文不是渲染时传入的根上下文，直接写products无法匹配到传入的数组，{{#each}}遍历空值就不会输出任何内容。

• 排查方法：在{{#each products}}前插入一行{{log products}}，如果控制台输出undefined即可确认该问题。
• 解决方法：使用Handlebars内置的根上下文标识符强制读取顶层变量，将循环语句修改为{{#each @root.products}}即可，不受任何嵌套层级的影响。

2. 循环块语法错误 #

如果实际编码时漏写了闭合标签{{/each}}，或者标签拼写错误（比如写成{{/ech}}、{{#each}}遗漏参数），会导致模板编译失败，整个循环块的内容都会被忽略不渲染。

• 解决方法：对照代码检查循环的开始、闭合标签拼写是否完全正确，有没有遗漏。

3. 模板引擎配置异常 #

部分自定义配置的express-handlebars实例会主动关闭内置助手，导致{{#each}}语法无法被识别。如果你使用的是官方hbs包，默认会开启所有内置助手，大概率是依赖安装异常导致的。

• 解决方法：重装依赖即可恢复：

npm uninstall hbs
npm install hbs

快速验证技巧 #

你可以先在模板循环外的位置直接写{{products.length}}，如果能正常输出2说明变量传递正常，优先检查循环语法问题；如果输出为空就优先排查上下文路径问题。

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