emberjs嵌套动态路由段返回空值并且无法更新子记录 [英] emberjs nested dynamic route segment returning null and unable to update child record

问题描述

我正在尝试实现一个评论功能，以显示属于单个帖子的评论列表.然后单击编辑并从属于单个帖子的所有评论中编辑任何选定的评论.

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.

更新了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.

点击editcomment，网址是posts/2/comments/undefined/edit.这是因为 EmBlog.PostCommentRoute &PostEditCommentRoute 仍然返回 null.

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.

总是返回 null 且最有可能导致问题的两条路由

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

推荐答案

修改了循环.在您没有传递上下文之前，您在路径中变得未定义.现在您将每个评论传递给 linkTo，以便它可以生成正确的路由.这是更新的小提琴链接 http://jsfiddle.net/VrR2T/4/

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>

这是更新后的表格.需要绑定到 content.body

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>

这篇关于emberjs嵌套动态路由段返回空值并且无法更新子记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！