Как отобразить вложенные связанные данные модели в Ember
Чтобы предвосхитить это, я новичок в Ember и использую Mirage для макета JSON-API-совместимого бэкэнда, но я наткнулся на загадку, которая, по моему мнению, будет обычным сценарием. В идеале я ищу создание единого представления, которое перечисляет посты и комментарии для каждого поста ниже. Проблема возникает, когда я хочу показать автора, связанного с каждым комментарием. Итак, я должен явно делать что-то не так, потому что Эмбер знает, как получить прямые ассоциации для Post модель, но все, что глубже, не определено.
В моем маршруте я выбираю все сообщения, и они знают, что затем запрашивают данные о взаимоотношениях с надлежащих маршрутов Mirage.
// app/routes/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('post');
}
});
Это ответ, который Ember получает от Mirage при запросе всех сообщений.
{
"data": [
{
"type": "posts",
"id": "1",
"attributes": {
"title": "Vero quas non inventore eos vel rerum nesciunt nemo molestiae.",
"body": "Eum minima beatae ullam nam id ut quia.\nPorro quidem blanditiis provident qui ex voluptas temporibus officia quos.\nDeleniti aut soluta placeat illo.\nId aut dolorem illo fugit corrupti commodi.\nPorro nesciunt enim debitis.\nMinima architecto velit corporis excepturi eos qui.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "10"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "2",
"attributes": {
"title": "Id quae est omnis dolorum quaerat aut sed corrupti voluptatem.",
"body": "Est ipsa voluptas quia quae nihil ipsum assumenda itaque nihil.\nTotam aut quia.\nRerum maxime cum distinctio harum dolorem dolores dicta.\nNesciunt id et minima velit omnis eius itaque ad.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "3",
"attributes": {
"title": "Provident et eius est.",
"body": "Neque autem deserunt.\nAb repellendus nemo et aut sunt veritatis facere asperiores soluta.\nEt placeat id dicta sint.\nHarum temporibus eos labore.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "8"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "4",
"attributes": {
"title": "A similique explicabo itaque dolor vel possimus aut praesentium veritatis.",
"body": "Inventore et ipsum ut porro.\nUt sed est unde illo nulla id doloribus accusamus voluptatum.\nTempora officiis ut enim porro et est qui.\nSit qui minima iste eaque cupiditate molestiae ut omnis magni.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "4"
}
},
"comments": {
"data": []
}
}
},
{
"type": "posts",
"id": "5",
"attributes": {
"title": "Et in consequatur ut autem et.",
"body": "Qui voluptatem harum aut amet possimus architecto eos commodi.\nNumquam cupiditate fugit.\nQuod consequatur minima aspernatur nobis qui eligendi qui corporis necessitatibus.\nIste velit perferendis non dolore ipsum perspiciatis quia.\nAut delectus et porro cupiditate laboriosam dolorem.\nEaque ipsa rerum ipsam placeat voluptatem enim.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "4"
}
]
}
}
},
{
"type": "posts",
"id": "6",
"attributes": {
"title": "Exercitationem quo perferendis.",
"body": "Dolor ut voluptates placeat ullam.\nOmnis aut et.\nIste est tenetur deleniti ea incidunt eos voluptas veniam iusto.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "3"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "1"
},
{
"type": "comments",
"id": "5"
},
{
"type": "comments",
"id": "9"
}
]
}
}
},
{
"type": "posts",
"id": "7",
"attributes": {
"title": "Officia ea quod natus corrupti.",
"body": "Et quia qui occaecati aspernatur voluptatem error in.\nDoloremque rerum sed autem minima quidem reiciendis.\nPossimus dolores voluptas voluptate rerum veniam dicta.\nNemo dolore perspiciatis harum dolorem soluta ab consectetur animi sed.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "3"
}
]
}
}
},
{
"type": "posts",
"id": "8",
"attributes": {
"title": "Quia ea cum vel repudiandae.",
"body": "Excepturi dolores sed modi est asperiores deleniti.\nTempore architecto recusandae nostrum culpa expedita iure voluptatibus accusantium nemo.\nQuia est voluptatum nulla earum culpa.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "7"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "2"
},
{
"type": "comments",
"id": "7"
},
{
"type": "comments",
"id": "8"
}
]
}
}
},
{
"type": "posts",
"id": "9",
"attributes": {
"title": "Nam fugit in voluptatibus et.",
"body": "Aut nihil atque tempore beatae voluptas.\nOptio voluptatum qui debitis omnis dolor maiores cumque.\nUt dolorem est magnam eveniet.\nMagni porro occaecati ex autem.\nPorro et alias beatae nemo laboriosam ut sint magnam quis.\nMollitia deserunt culpa non.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "9"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "10"
}
]
}
}
},
{
"type": "posts",
"id": "10",
"attributes": {
"title": "Aut delectus nobis voluptate.",
"body": "Alias impedit itaque at rerum enim.\nVoluptas itaque quaerat qui optio quo.\nNihil voluptatem quos nihil pariatur sapiente tempore necessitatibus quia et.\nSed consectetur modi dolorum sunt ex odit at.\nVoluptas numquam totam dolores ipsam rerum.\nEt hic eum sunt et.",
},
"relationships": {
"author": {
"data": {
"type": "users",
"id": "1"
}
},
"comments": {
"data": [
{
"type": "comments",
"id": "6"
}
]
}
}
}
]
}
После получения всех сообщений и моделей отношений верхнего уровня, Эмбер не идет дальше, поэтому я остаюсь с неопределенным comment.author в моем шаблоне. Есть ли какой-нибудь способ, которым я могу сказать Эмберу, что нужно выбрать нужные мне вложенные модели, или я все делаю неправильно?
РЕДАКТИРОВАТЬ
Это структура моих моделей и шаблоны для них. Надеюсь, это поможет дать больше контекста.
Post модель:
// app/models/post.js
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
body: DS.attr('string'),
createdAt: DS.attr('date', {
defaultValue() { return new Date(); }
}),
author: DS.belongsTo('user'),
comments: DS.hasMany('comment')
});
Comment модель:
// app/models/comment.js
import DS from 'ember-data';
export default DS.Model.extend({
body: DS.attr('string'),
createdAt: DS.attr('data', {
defaultValue() { return new Date(); }
}),
author: DS.belongsTo('user'),
post: DS.belongsTo('post')
});
User модель:
// app/models/user.js
import DS from 'ember-data';
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
posts: DS.hasMany('post'),
comments: DS.hasMany('comment'),
fullName: Ember.computed('firstName', 'lastName', function() {
return `${this.get('firstName')} ${this.get('lastName')}`;
})
});
Index шаблон:
// app/templates/index.hbs
{{#each model as |post|}}
{{post-content post=post}}
{{/each}}
Post шаблон:
// app/templates/components/post-content.hbs
<div class="post-main">
<h5 class="post-author-name">{{post.author.fullName}}</h5>
<div class="post-timestamp">
<h5 class="time-in-words">{{moment-from-now post.createdAt interval=1000}}</h5>
</div>
<div class="post-content">
<h2 class="post-title">{{post.title}}</h2>
<p class="post-body">{{post.body}}</p>
</div>
<div class="post-actions">
<h6>Comments ({{post.comments.length}})</h6>
</div>
</div>
<ul class="post-comments">
{{#each post.comments as |comment|}}
{{post-comment comment=comment}}
{{/each}}
</ul>
Comment шаблон:
// app/templates/components/post-comment.hbs
<!-- This is blank -->
<h5>{{comment.author.fullName}}</h5>
<!-- This is not blank -->
<p>{{comment.body}}</p>