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

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

我已经完成了使用辅助函数通过JS字符串生成表的任务，但我需要将组件操作附加到表中的行。在恩伯尔这样做的正确方法是什么？我使用的是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}}

Ember Handlebars生成表格

1 个答案: