如何在hbs中使用#each遍历数组？

编程问答 2022-08-12

问题描述

我有一个称为标题的数组，我想在hbs文件中使用#each进行迭代和渲染。但是，当我在客户端加载文件时，似乎什么都没有出现，甚至没有错误。我要去哪里错了？

<body>

         {{#each headlines}}

         <h1> {{this}} </h1>

         {{/each}}

</body>

解决方法

这是一个演示：

const templateInput = {
  headlines: [ "bar","foo","bar2","foo2"]
};

const setup = () => {
    const personTemplate = document.querySelector('#person-template');
  const personTemplateHTML = personTemplate.innerHTML;
  const template = Handlebars.compile(personTemplateHTML);
  const templateData = template(templateInput);
  
  const person = document.querySelector('#person');
  person.innerHTML = templateData;
}

//loéd
window.addEventListener('load',setup);
<!DOCTYPE html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
</head>
<body>
  <section id="person"></section>
  <script id="person-template" type="text/x-handlebars-template">
  {{#each headlines}}
    <h1> {{this}} </h1>
  {{/each}}
  </script>
</body>

arraysarraysarraysiterationiterationjavascripttemplatestemplatestemplates