Ember 车把生成表答案

【问题标题】：Ember Handlebars Generate TableEmber 车把生成表
【发布时间】：2017-09-14 16:06:31
【问题描述】：

我是 Ember/Handlebars 的新手，需要使用表单生成导航表

<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>

这将允许我拥有可以在单击 headerRow 时动态扩展/收缩的组。

示例 JSON 数据如下所示

[{groupName: 'Group 1', item: 'item1'},{groupName: 'Group 1', item: 'item2'},{groupName: 'Group 2', item: 'item1'},{groupName: 'Group 2', item: 'item2'}]

如果当前 groupName 与最后一个组名不同，我需要遍历数据并创建 tbody 组。这是 Javascript/jQuery 中的一项微不足道的任务，可以将 html 创建为字符串并添加打开和关闭 tbody 和标题行，但我如何在 Handlebars 中执行此操作。在使用 {{#each data as |item index|}} Handlebars 格式时，我找不到将最后一组存储在变量中的方法（因此我可以与当前组进行比较）。

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

【问题讨论】：

这是一个开始的地方：ember-twiddle.com/… 您使用表格进行导航似乎很疯狂，并且您的 JSON 可能需要以不同的方式考虑 - 但是如何遍历数组和将其分成组是合理的。我也想知道。
如果你可以改变JSON，这里是另一种看待它的方式：ember-twiddle.com/…
导航表实际上是页面中间的一个子内容导航，相应的数据被加载到相邻的div中。它不是主站点导航。
如果它不是一个数据表 - 它不应该是一个表。 quora.com/When-is-it-appropriate-to-use-tables-in-HTML
我继续并更改了 JSON 数据格式并且效果很好。我仍然想知道如何在不更改 JSON 格式的情况下执行此操作，因为我不会始终控制它。

标签： javascript ember.js handlebars.js

【解决方案1】：

首先使用.reduce() 重构您的数据：

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}}

【讨论】：