如何使用Handlebars根据types和days数据生成表格？

我有一个字符串数组：

const types = ['Day', 'Evening']

和一个对象：

const days = { 
  Mon: [{count: 2, type: 'Day'}], 
  Tue: [{count: 3, type: 'Evening'}, {count: 2, type: 'Day'}] 
}

想用Handlebars基于这两个数据生成对应格式的表格。目前编写了部分代码，但不清楚在types的循环里如何正确引用days的数据，附上当前代码求技术帮助：

<table style="color: #000">
  <thead>
    <tr>
      <th></th>
      {{#each types}}  
      <th style="padding: 2px 0">
        {{this}}
      </th>
      {{/each}}
    </tr>
 </thead>

 <tbody>
  {{#each days}}
  <tr>
    <td style="color: #000; border: 1px solid #000;">
     {{@key}}
    </td>

    {{#each types}}
     <td style="color: #000; border: 1px solid #000;">
       {{#equals days.type this }}
         {{days.count}}
       {{/equals}}
     </td>
    {{/each}}
  </tr>
  {{/each}}
 </tbody>

</table>

你当前代码的核心问题是上下文引用错误：在{{#each days}}内部，当前上下文是当天的数据数组（比如Mon对应的[{count:2, type:'Day'}]），而非外层的days对象，直接用days.type无法正确取值。下面是两种修正方案：

方案1：模板内嵌套循环匹配（无需额外Helper） #

<table style="color: #000; border-collapse: collapse;">
  <thead>
    <tr>
      <th></th>
      {{#each types}}  
      <th style="padding: 2px 8px; border: 1px solid #000;">
        {{this}}
      </th>
      {{/each}}
    </tr>
 </thead>

 <tbody>
  {{#each days as |dayItems dayName|}}
  <tr>
    <td style="color: #000; border: 1px solid #000; padding: 2px 8px;">
     {{dayName}}
    </td>

    {{#each ../types as |type|}}
     <td style="color: #000; border: 1px solid #000; padding: 2px 8px;">
       {{#each dayItems}}
         {{#equals this.type type}}
           {{this.count}}
         {{/equals}}
       {{/each}}
     </td>
    {{/each}}
  </tr>
  {{/each}}
 </tbody>
</table>

关键修改点：

• 使用{{#each days as |dayItems dayName|}}明确变量名，dayItems指代当天的具体数据数组，dayName指代星期名称（如Mon）
• 遍历types时，用../types跳出当前day的上下文，访问外层的types数组
• 在每个type列中，遍历当天的dayItems数组，匹配对应type的项并输出count

方案2：自定义Helper简化模板（更简洁） #

先注册一个findByType Helper：

Handlebars.registerHelper('findByType', function(items, targetType) {
  const matchedItem = items.find(item => item.type === targetType);
  return matchedItem ? matchedItem.count : ''; // 无匹配项时返回空或0
});

然后修改模板：

<table style="color: #000; border-collapse: collapse;">
  <thead>
    <tr>
      <th></th>
      {{#each types}}  
      <th style="padding: 2px 8px; border: 1px solid #000;">
        {{this}}
      </th>
      {{/each}}
    </tr>
 </thead>

 <tbody>
  {{#each days as |dayItems dayName|}}
  <tr>
    <td style="color: #000; border: 1px solid #000; padding: 2px 8px;">
     {{dayName}}
    </td>

    {{#each ../types as |type|}}
     <td style="color: #000; border: 1px solid #000; padding: 2px 8px;">
       {{findByType dayItems type}}
     </td>
    {{/each}}
  </tr>
  {{/each}}
 </tbody>
</table>

内容的提问来源于stack exchange，提问作者YEL