如何在 EmberJS 应用程序中显示分组结果

Question

我创建了一个简单的 EmberJS 应用程序，它列出了来自无头 CMS 的作业。来自后端的职位数据是这种格式

[
   {
      "id": "1234",
      "description": "Test description"
      "category": "Human Resources"
   },
   {
      "id": "4321",
      "description": "Test description"
      "category": "Human Resources"
   },
   {
      "id": "5678",
      "description": "Test description"
      "category": "Information Technology"
   }
]

我的应用程序按预期返回的顺序显示结果，但我想按类别对结果进行分组，以便结果显示如下：

人力资源

1234
4321

信息技术

5678

在此先感谢您的帮助。

注意：我使用的是 EmberJS 3.19 版

编辑

我现在的模型就是工作模型

import Model, { attr } from "@ember-data/model";

export default class JobModel extends Model {
  @attr Title;
  @attr Description;
  @attr Type;
  @attr Slug;
  @attr category;
  @attr job_type;
  @attr region;
  @attr company;
  @attr createdAt;
}

我在我的索引路由（主页）中使用 ember-data 加载数据，就像这样

export default class IndexRoute extends Route {
  @service store;
  async model() {
    return this.store.findAll("job");
  }
}

通过该设置，我可以遍历作业并将它们显示在我主页上的列表中，如下所示：

{{#each @model as |job|}}
        <Job @job={{job}} />
{{/each}}

不确定是否可行，但我希望能够显示每个类别以及该类别中包含的职位，其结构类似于以下伪代码：

{{#each category}}
<h3>{{category.name}}</h3>
  {{#each job-in-category}}
        <Job @job={{job}} />
  {{/each}}
{{/each}}

Answer 1

基本上您可以将逻辑添加到您的路由 model 挂钩或创建一个控制器并使用 getter.

在你可以做的路线中

  async model() {
    const jobs = await this.store.findAll("job");
    return jobs.reduce((groups, job) => {
      if(!groups.has(job.category)) {
        groups.set(job.category, []);
      }
      groups.get(job.category).push(job);
      return groups;
    }, new Map());
  }

并在您的模板中使用它：

{{#each-in @model as |category jobs|}}
  <h3>{{category}}</h3>
  {{#each jobs as |job|}}
    <Job @job={{job}} />
  {{/each}}
{{/each-in}}

您可以在控制器上的 getter 中生成相同的结构或为其使用专用组件。也可能您想为您的类别创建专用 ember-data 模型并使用关系。

如何在 EmberJS 应用程序中显示分组结果

How do I display grouped results in an EmberJS Application

ember.js

ember-data

ember-cli