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

Question

作为序言，我是 Ember 的新手，并使用 Mirage 来模拟符合 JSON-API 的后端，但我在我认为常见的场景上遇到了障碍。理想情况下，我希望创建一个单独的视图，列出帖子和下面每个帖子的评论。当我想显示与每条评论关联的作者时，麻烦就来了。所以，我肯定在这里做错了什么，因为 Ember 知道如何获取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"
            }
          ]
        }
      }
    }
  ]
}

在获得所有帖子和顶级关系模型之后，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>