如何在Ember中显示嵌套的相关模型数据

Question

在前言中，我是Ember的新手，并使用Mirage来模拟符合JSON-API标准的后端，但我已经碰到了我认为常见的情况。理想情况下，我希望创建一个单独的视图，列出帖子和下面每个帖子的评论。当我想要显示与每个评论相关联的作者时，就会出现问题。所以，我必须在这里做错了，因为Ember知道如何获取Post模型的直接关联，但是任何比这更深的东西都是未定义的。

在我的路线中，我获取所有帖子，然后知道然后从正确的幻影路线请求关系数据。

// 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"
            }
          ]
        }
      }
    }
  ]
}

在获得所有帖子和顶级关系模型之后，Ember并没有更深入，所以我在模板中留下了未定义的comment.author。有什么方法可以告诉Ember获取我需要的嵌套模型，还是我认为这一切都错了？

修改

这是我的模型的结构和它们的模板。希望它有助于提供更多背景信息。

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>