如何在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挂钩，也可以创建一个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中生成相同的结构，或者为其使用专用组件。此外，您可能希望为您的类别创建一个专用的ember-data模型并使用关系。