emberjs nested dynamic route segment returning nul

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

problem 1: i think it would help if you didn't change the path and kept it as '/:post_id'

problem 2: sorry, i don't think i can help here.

Answer 2

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>

Answer 3

I downloaded your code from the fiddle and found a few problems.

First

You accidentally used Ember.Router instead of Ember.Route below.

EmBlog.PostCommentsRoute = Ember.Router.extend({
// ...
EmBlog.PostCommentRoute = Ember.Router.extend({

Should be

EmBlog.PostCommentsRoute = Ember.Route.extend({
// ...
EmBlog.PostCommentRoute = Ember.Route.extend({

Second

You didn't need to override model in this route, the default Ember behavior is fine. You're also referencing params_id when that variable has not been declared.

EmBlog.PostRoute = Ember.Route.extend({
  model: function(params) {
     post = this.modelFor('posts');
     return post.get(params_id);
    //return EmBlog.Post.find(params.post_id);
    //return this.modelFor('post').filterProperty('id', params.post_id);
  },

Third

in response to your comment below

The problem is that you're linking to editComment from within the context of the post, not the comment itself. Once that was fixed, I also changed the TextArea to be model.body instead of body.

The changes are itemized in this Gist. Now the editing needs to be implemented.