emberjs嵌套的动态路由段返回null并且无法更新子记录 [英] 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 。

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.

点击editcomment的url是 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);
  },

});

这是路由器。我尝试过其他的嵌套组合，但是在这一个方面已经结束了，因为它是允许添加评论工作的唯一版本，这就是为什么这个问题集中在更新一个嵌套的动态段，否则我会问两个： p>

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嵌套的动态路由段返回null并且无法更新子记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！