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

lfapxunr  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(118)

我已经创建了一个简单的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}}
7d7tgy0s

7d7tgy0s1#

基本上,您可以将逻辑添加到routes model钩子中,或者创建一个Controller并使用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中生成相同的结构,或者为它使用专用的组件。

相关问题