我有一个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在控制台中显示数据。为什么它不呈现变量?
1条答案
按热度按时间fcg9iug31#
模板中的
{{#each patient}}
预期传递给模板函数的数据具有名为patient
的属性,并且此属性的值是可迭代的-类似于Array。但是,您似乎只是将Array直接传递给模板函数,而该Array没有
patient
属性,因此#each
循环永远不会执行。实现这一点的一种方法是将一个Object传递给模板函数,并为该Object分配一个键
patient
,其值为患者数组。这将需要改变:
至:
或者使用以下简写:
注意:由于
patient
是一个患者对象数组,如果我是您的团队成员,我会强烈建议您在其名称中添加一个“s”,使其成为复数。