Javascript 余烬车把生成表

我是新的余烬/车把，需要生成一个导航表的形式

<table>
    <tbody>
        <tr class="headerRow"><td>Group 1</td></tr>
        <tr><td>item1</td></tr>
        <tr><td>item2</td></tr>
    </tbody>
    <tbody>
        <tr class="headerRow"><td>Group 2</td></tr>
        <tr><td>item1</td></tr>
        <tr><td>item2</td></tr>
    </tbody>
</table>

如果当前组名与最后一个组名不同，我需要遍历数据并创建tbody组。在Javascript/jQuery中，将html创建为字符串并添加open和close tbody行和header行是一项很简单的任务，但是如何在Handlebar中做到这一点呢。我找不到将最后一个组存储在变量中的方法，因此在使用{{each data as | item index |}}句柄格式时，我可以与当前组进行比较

通过使用helper函数，我已经完成了通过JS字符串生成表的任务，但是我需要将组件操作附加到表中的行。在余烬中，正确的方法是什么？我正在使用Ember CLI 2.9.1

首先使用。减少以重新构造数据：

yourData.reduce((res,item) => {
  if(!res[item.groupName]) {
    res[item.groupName] = []
  }
  res[item.groupName].push(item.item);
  return res;
}, {});

在计算属性中执行此操作

这将产生更好的结构：

{
  "Group 1": [
    "item1",
    "item2"
  ],
  "Group 2": [
    "item1",
    "item2"
  ]
}

现在很容易生成所需的数据：

{{#each-in data as |group items|}}
  <tbody>
    <tr class="headerRow"><td>{{group}}</td></tr>
    {{#each items as |item|}}
      <tr><td>{{item}}</td></tr>
    {{/each}}
  </tbody>
{{/each-in}}

---

这里是一个起点：您使用表来表示nav似乎很疯狂，您的JSON可能需要以不同的方式来考虑——但如何循环数组并将其划分为组的问题是合理的。我也想知道。如果你可以改变JSON，这里还有另一种方法：导航表是页面中间的一个真正的子内容导航，每个数据都被加载在一个相邻的div中。它不是主要的站点Nav。如果它不是一个数据表——它不应该是一个表。我继续修改了JSON数据格式，结果成功了。我仍然想知道如何在不改变JSON格式的情况下做到这一点，因为我不会一直控制它。

{{#each-in data as |group items|}}
  <tbody>
    <tr class="headerRow"><td>{{group}}</td></tr>
    {{#each items as |item|}}
      <tr><td>{{item}}</td></tr>
    {{/each}}
  </tbody>
{{/each-in}}