NodeJS 带手柄的Express不会将数据加载到变量中

wixjitnu  于 2022-12-03  发布在  Node.js
关注(0)|答案(1)|浏览(121)

我有一个NodeJS/Express应用程序,它使用Handlebar作为模板。
除了从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是否将其视为Array。
它似乎在进入#每一个助手时就断裂了。
我试着用../来转换上下文,我试过了我能想到的所有方法来将数据导入模板。
我担心在一个绑定到按钮点击的事件处理程序中,“this”上下文被破坏。我将代码移到事件处理程序之外,“this”在Chrome中似乎是正确的,但行为没有改变。
下面是Chrome中的数组数据:

当在Chrome中的断点暂停时,我可以看到患者数据在传递到模板时存在。
我知道这是愚蠢的东西,但我的头从它撞到墙上痛。
这已经发生在两个不同的模板上。当然,它们是相似的,但我已经尝试了许多变化,它仍然不能加载。
谢谢你的帮助。
有人看到什么明显的东西吗?
附录:
我修改了代码来传递属性,现在可以在Chrome中看到它了。

它仍然没有出现在车把中。
this.patients在控制台中显示数据。为什么它不呈现变量?

fcg9iug3

fcg9iug31#

模板中的{{#each patient}}预期传递给模板函数的数据具有名为patient的属性,并且此属性的值是可迭代的-类似于Array。
但是,您似乎只是将Array直接传递给模板函数,而该Array没有patient属性,因此#each循环永远不会执行。
实现这一点的一种方法是将一个Object传递给模板函数,并为该Object分配一个键patient,其值为患者数组。
这将需要改变:

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction(patient);

至:

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

或者使用以下简写:

let patientSearchResultTemplateObject = patientSearchResultTemplateFunction({ patient });

注意:由于patient是一个患者对象数组,如果我是您的团队成员,我会强烈建议您在其名称中添加一个“s”,使其成为复数。

相关问题