Handlebar structure

Question

I have a table using a handlebar template. #each is declared in the first row of the table, the tag is declared in the next row, and the #each closing declaration is completed in the last row. <

P粉011912640 · Answer

I'm not sure why you want to wrap the #each call like {{#each itemList}}. This will produce completely broken HTML.

You want each item in the itemList to have a row , so you need to make sure the rows are marked and are enclosed by #each, and any tokens outside of each are valid and enclosing :



const template = Handlebars.compile(`

     {{#each itemList}}
       
     {{/each}}
           
   
     
       Name
       Price
       Quantity
       Total
     
   
   
     
       
     

         {{name}}
         {{price}}
         {{qty}}
         {{total}}
       

       
     
  

`);

const data = {
  itemList: [
    {
      name: 'One',
      price: 1,
      qty: 1,
      total: 1
    },
    {
      name: 'Two',
      price: 2,
      qty: 2,
      total: 4
    }
  ]
};

const output = template(data);

document.body.innerHTML = output;