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

在此之前，我还不熟悉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不会再深入了，因此我的模板中留下了一条未定义的

注释。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')
});

// 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')
});

// 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')}`;
  })
});

注释

型号：

// 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')
});

// 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')
});

// 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')}`;
  })
});

用户

型号：

// 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')
});

// 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')
});

// 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')}`;
  })
});

索引

模板：

// app/templates/index.hbs

{{#each model as |post|}}
  {{post-content post=post}}
{{/each}}

// 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>

// app/templates/components/post-comment.hbs

<!-- This is blank -->
<h5>{{comment.author.fullName}}</h5>

<!-- This is not blank -->
<p>{{comment.body}}</p>

Post

模板：

// app/templates/index.hbs

{{#each model as |post|}}
  {{post-content post=post}}
{{/each}}

// 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>

// app/templates/components/post-comment.hbs

<!-- This is blank -->
<h5>{{comment.author.fullName}}</h5>

<!-- This is not blank -->
<p>{{comment.body}}</p>

---

那么，

{{post.comment}}

有效吗？作者是否曾经加载到你的Ember应用程序中，如果是，如何加载？是的，我可以访问帖子评论及其属性。此外，还加载了帖子作者，但显然不是评论作者。现在，Ember异步获取文章作者和评论，每个都作为对Mirage的单独请求。虽然我可以将这些内容包括在要侧载的回复中。

评论

是否有

作者

链接？我用我的模型和模板编辑了原始问题，希望这会有所帮助。此时没有链接。所以余烬会获取

/comments/4

？反应如何？可能是作者关系缺失？