How do I iterate over an array with #each in hbs?

Question

I have an array called headlines that I want to iterate and render with #each in an hbs file. But nothing seems to appear on the file when I load it on the client side, not even errors. Where am I going wrong?

<body>

         {{#each headlines}}

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

         {{/each}}

</body>

Answer 1

Here's a demo:

 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>

How do I iterate over an array with #each in hbs?

Question

1 answers

solution1
0 2020-09-02 22:54:57

How do I iterate over an array with #each in hbs?

Question

1 answers

solution1 0 2020-09-02 22:54:57

solution1
0 2020-09-02 22:54:57