javascript - Ember Handlebars 生成表

Question

我是 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'}]

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

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

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