Ember.js has_many not being loaded on deep nested routes

Question

Given my current router:

1. Posts
   • Create
2. Post
   • Edit
   • Comments
     1. Create
   • Comment
     1. InnerComments
        • Create
     2. InnerComment
        • Index (post.comment.innerComment.index)

Ember.js is not loading any existing innerComments from the backend, but it is doing a hell of a job in creating and saving them like the picture below:

Not only I am able to create the inner comments, I am also able to successfully edit them as long as I do not reload the page... This unique behaviour tells me that the issue seems to be rather specific, but I just cannot find it. The code snippets below summarizes how things are loaded in order, but you can also check out the Source Code and these two screenshots with Ember Inspector:

Screenshot 1 - Created Inner Comment

Screenshot 2 - Page Refresh.

Post.Index (model is a post)

{{render "post.comments.index" model}}

Post.Comments.Index (model is a post)

<ol>
    {{#each model.comments as |comment|}}
        <li>{{render "post.comment.index" comment}}</li>
    {{/each}}
</ol>

Post.Comment.Index (model is a comment)

 <!--Comment Text, Comment by x User, edit, etc-->
{{render "post.comment.innerComments.index" model}}

Post.Comment.InnerComments.Index (model is a comment)

<ol>
    {{#each model.inner_comments as |comment|}}
        <li>{{render "post.comment.innerComment.index" comment}}</li>
    {{/each}}
</ol>

Post.Comment.InnerComments.Index (model is an innerComment)

 <!--InnerComment Text, InnerComment by x User, edit, etc-->
{{model.text}}

Answer 1

One missing line on Serialization has_many :inner_comments was the culprit as it was lost between merging two local branches.

If you have a similar problem, check the developer tools for the network transactions. If one of your XHR requests is missing the expected return payload (the inner_comments for each comment request in my case), then the problem is on your backend...