Handlebars模板循环引用报错infinite loop detected 如何修复？

这个问题我之前也碰到过！核心原因就是你的两个Handlebars模板foo.mustache和bar.mustache形成了循环引用，触发了编译时的无限递归检测。具体来说：

• foo.mustache里通过{{>bar}}引入了bar模板
• 而bar.mustache又通过{{#propertyObject}}{{>foo}}{{/propertyObject}}再次引入了foo模板

相当于A调用B、B又调用A，Handlebars的模板加载机制会追踪这个调用链，一旦发现闭环就会抛出infinite loop detected, partial '/templates/foo.mustache' was previously loaded的错误。

正确修复方式 #

你需要打破这个循环引用链，让每个模板的职责单一化，具体可以这么做：

1. 调整bar.mustache的渲染逻辑，移除对foo的递归调用

既然bar.mustache的作用是渲染propertyObject的内容，直接在模板里处理该对象的字段即可，不需要再调用foo：

修改后的bar.mustache：

{{#each propertyObject}}
  {{! 根据你的实际需求渲染propertyObject的属性，比如propsName或其他字段 }}
  {{propsName}}
{{/each}}

同时可以把foo.mustache格式化得更易读：

{{#if hasProperties}}
  {{>bar}}
{{else}}
  {{propsName}}
{{/if}}

2. 若需递归渲染嵌套结构，新增专用模板（可选）

如果你的propertyObject是嵌套的层级结构，确实需要递归渲染，建议新增一个专门处理单个属性的模板（比如property-item.mustache），然后在bar里递归调用这个新模板，避免和foo形成闭环：

property-item.mustache：

{{propsName}}
{{#if hasChildProperties}}
  {{>property-item}} {{! 仅在需要时递归调用自身 }}
{{/if}}

修改后的bar.mustache：

{{#each propertyObject}}
  {{>property-item}}
{{/each}}

这样既满足了递归渲染的需求，又彻底打破了foo和bar之间的循环引用。

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