Express+Handlebars无法渲染API数据到模板变量的问题排查

核心问题 #

你传递给Handlebars模板的数据结构和模板中的变量引用不匹配，导致#each无法正确遍历数组。

问题代码拆解 #

1. 原模板代码：

<script id="search-result-template" type="text/x-handlebars">
  <div>String</div>
  {{#each patient}}
    <div>
    {{cp_first_name}}
    </div>
    {{!-- {{> searchresultpartial}} --}}
  {{/each}}
</script>

2. 原JS传递数据的代码：

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);

这里直接把数组patient传给了模板，此时模板的根上下文就是这个数组，模板里的patient变量是不存在的，所以{{#each patient}}找不到遍历的目标。

补充修改后的问题 #

你提到修改后传递了带patients属性的数据，但模板里还是用{{#each patient}}，变量名拼写不一致（少了s），这也会导致无法渲染。

两种解决方案 #

方案一：直接遍历根上下文数组 #

如果直接传递数组给模板，模板里用this指代根上下文的数组：

<script id="search-result-template" type="text/x-handlebars">
  <div>String</div>
  {{#each this}}
    <div>{{cp_first_name}}</div>
  {{/each}}
</script>

JS代码保持原样：

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);

方案二：将数组包装为对象属性（更推荐，结构更清晰） #

把数组放到一个对象的属性里，模板通过属性名遍历：

1. 修改JS代码，传递包装后的对象：

// 把数组包装成对象，属性名和模板里的一致
let patientSearchResultTemplateObject = patientSearchResultTemplateFunction({ patients: patient });

2. 修改模板代码，使用正确的属性名：

<script id="search-result-template" type="text/x-handlebars">
  <div>String</div>
  {{#each patients}}
    <div>{{cp_first_name}}</div>
  {{/each}}
</script>

验证要点 #

• 确认传递给模板的数据结构和模板中的变量名完全匹配（包括大小写、单复数）
• 可以在模板中添加{{log this}}来打印当前上下文，调试数据是否正确传入：

<script id="search-result-template" type="text/x-handlebars">
  {{log this}} <!-- 在控制台查看上下文数据 -->
  <div>String</div>
  {{#each patients}}
    <div>{{cp_first_name}}</div>
  {{/each}}
</script>

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