我已经创建了一个简单的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}}
1条答案
按热度按时间7d7tgy0s1#
基本上,您可以将逻辑添加到routes
model
钩子中,或者创建一个Controller并使用getter。在你能做的路线上
并在模板中使用它:
您可以在控制器上的getter中生成相同的结构,或者为它使用专用的组件。