Express with Handlebars 不会将数据加载到变量中

Question

我有一个使用 Handlebars 作为模板的 NodeJS/Express 应用程序。

除了我从 Express API 返回数据的地方外，所有模板和部分都可以正常加载。

数据返回，我可以在 Chrome 调试器中看到它。

在这个模板中，我在脚本中定义 HTML 并在 JS 中编译它。

这是模板 HTML：

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

实际页面更加结构化，但为了调试，我已将其缩小到这个范围。

下面是编译模板的代码：

let patientSearchButton = document.getElementById('patient-search-execute');
patientSearchButton.addEventListener("click", async function (e) {
    e.preventDefault();
    let patientSearchFirstname = document.getElementById('patient-search-firstname')
    let cp_first_name = patientSearchFirstname.value;
    let url = baseURL + 'patientsearchquery/' + cp_first_name;
    const response = await fetch(url, {
        method: 'get',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        }
    });
    var data = response.json();
    let patientList = await data;
    patient = patientList;

    if (response.status === 200) {
         let patientSearchResultTemplate = document.querySelector("#search-result-template").innerHTML;
        let patientSearchResultTemplateFunction = Handlebars.compile(patientSearchResultTemplate);
        let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);
        let contentPartial = document.getElementById('patient-search-table');
        contentPartial.innerHTML = patientSearchResultTemplateObject;

        if (Handlebars.Utils.isArray(patient)) {
            console.log("Array");
        } else {
            console.log("Not");
        }
        console.log(patient);
    } else {
        alert("HTTP-Error: " + response.status);
    }
});

我可以看到来自 API 的数据，并且我正在验证 Handlebars 是否将其视为一个数组。

当它进入#each 助手时，它似乎会中断。

我试图用 ../ 改变上下文，并且我已经尝试了我能想到的所有变体来将数据哄骗到模板中。

我担心在与按钮单击相关的事件处理程序中，“this”上下文被破坏了。我将代码移到了事件处理程序之外，“this”在 Chrome 中似乎是正确的，但行为没有改变。

这是 Chrome 中的数组数据：

当在 Chrome 中的断点处暂停时，我可以看到患者数据在传递给模板时存在。

我知道这很蠢，但我的头撞在墙上很疼。

这发生在两个不同的模板上。当然，它们很相似，但我尝试了很多变体，但仍然无法加载。

感谢您提供的任何帮助。

有人看到明显的东西吗？

附录：

我更改了代码以传递该属性，现在我可以在 Chrome 中看到它。

它仍然没有出现在 Handlebars 中。

this.patients 在控制台中显示数据。为什么它不渲染变量？

Answer 1

模板中的 {{#each patient}} 预计您传递给模板函数的数据具有名为 patient 的属性，并且该属性的值是可迭代的 - 就像一个数组。

但是，您似乎只是将 Array 直接传递给模板函数，并且该 Array 没有 patient 属性，因此 #each 循环永远不会执行。

完成这项工作的一种方法是将一个对象传递给您的模板函数，并为该对象分配一个键 patient，其值为您的患者数组。

这需要改变：

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);

至：

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction({ patient: patient });

或者使用简写：

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction({ patient });

注意：由于 patient 是一个患者对象数组，如果我在你的团队中，我会敦促你在其名称中添加一个“s”以使其成为复数。