emberjs nested dynamic route segment returning null and unable to update child record

Question

I am trying to implement a comment-feature, to display a list of comments that belongs to a single post. Then click edit and edit any of the selected comments from from all the comments that belong to a single post.

Updated jsfiddle.

I am able to create a comment that belongs to the selected post as seen in the fiddle above. **However I am unable to updating an existing comment and the comment edit form won't even display any comment. It is always blank and doesn't bind to any existing comment.

Clicking on editcomment the url is posts/2/comments/undefined/edit. This is because EmBlog.PostCommentRoute & PostEditCommentRoute are still returning null.

All the commented out code are the different attempts at getting it to work that has failed. I left them here, so anyone looking at the question will know what I have tried so far.

The two routes that always return null and most likely causing the problem

 EmBlog.PostEditCommentRoute = Ember.Route.extend({
  model: function(params) {
   var commentEdit = this.modelFor('post').get('comments');
   return commentEdit.get(params.comment_id);

   //return EmBlog.Comment.find({post: post.get('id'), id: params.comment_id});

   //var comment = this.modelFor('post').get('comments');
   //return comment.filterProperty('id', params.comment_id);  
  },

  setupcontroller: function( controller, model) {
  controller.set('content', model);
  }
});

The Comment route to display single post

EmBlog.PostCommentRoute = Ember.Route.extend({
  model: function(params){  
     comment = this.modelFor('post').get('comments');
    // comment = EmBlog.Comment.find(params.comment_id);

    return comment.get(params.comment_id);
    // return comment.filterProperty('body', params.comment_id);
  },

  setupController: function(controller, model) {
    //var comment = this.controllerFor('postComments').get('body');
    //controller.set('content', comment.filterProperty('body', model));

    controller.set('content', model);
  },

});

This is the router. I have tried other combinations of nesting but settled on this one because it was the only version that allowed adding a comment to work, which is why this question is focused on updating a nested dynamic segment only otherwise I would been asking about both:

 EmBlog.Router.map(function() {
    this.resource("posts", {path: '/posts'}, function(){
      this.route('new');

      this.resource('post', {path: '/:post_id/'}, function(){
        this.route('edit', {path: '/edit'});
        this.route('comments', {path:  '/comments'});
        this.route('newComment');
        this.route('comment', {path: '/comments/:comment_id'});    
        this.route('editComment', {path: '/comments/:comment_id/edit'});       
     }); 
   });
});

Answer 1

Modified the loop. Before you were not passing a context hence you were getting undefined in the path. Now you are passing each comment to linkTo so it can generate the proper route. Here is a link the updated fiddle http://jsfiddle.net/VrR2T/4/

<script type="text/x-handlebars" data-template-name="post/comments">
  <h1> Yes Comments template</h1>

    <p> {{#linkTo "post.newComment"}} Add comment{{/linkTo}}</p>
    <br/>
    {{#each comment in content}}
        <br/>
          {{comment.body}} <br/> 
     <p>{{#linkTo "post.editComment" comment}} Edit Comment {{/linkTo}}</p>

    {{/each}}
  {{outlet}}
</script>

Here is the updated form. need to bind to content.body

<script type="text/x-handlebars" data-template-name="post/_commentForm">
   <form {{action save on='submit'}}>
{{view Ember.TextArea valueBinding="content.body" placeholder="body"}}
<button type="submit"> save comment </button> 
 <button {{action 'cancel' content}}> Cancel</button>
</form>
</script>