emberjs-RC2- how to access router instance from controller & actions don't bubble to router

Question

In the router I have an event 'removeComment'. In the controller if access it via this.get('target').send('removeComment', context);, I get the error Nothing handled the event 'removeComment'. When I use this.get('target.router').send('removeComment', comment), the error becomes Object # has no method 'send'. using this.router.send('removeComment', comment), will give the error: Cannot read property 'send' of undefined.

Also just sending the 'removeComment' action to the the PostEditController does not bubble through the controller, up to the route.

How do I access the router instance from the controller in the emberjs rc2 and routerV2.

The jsfiddle

The Router:

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

     });    
 });
});

The controller

 EmBlog.PostEditCommentController = Ember.ObjectController.extend({

   destroyMe: function(comment) {
     this.get('target.router').send('removeComment', comment);
   } 
});

The Router

EmBlog.PostEditCommentRoute = Ember.Route.extend({
   events: { 
      removeComment: function(context) {
       var comment = context.get('content');
       comment.deleteRecord();
       comment.get('store').commit();
       this.transitionTo('post.index');
     }          
    }
});

I am accessing it in the post/comments template. This is the controller for that template .

EmBlog.PostCommentsController = Ember.ArrayController.extend({
  needs: ['postEditComment']
});

The post/comments template

<script type="text/x-handlebars" data-template-name="post/comments">
     {{#each controller}}

     <p><a href='#' {{action destroyMe this target="controller.controllers.postEditComment"}}> Destroy </a></p>

    {{/each}}

 </script>

Answer 1

Thanks foir the updae, end the fiddle, it helps a lot :). I think I figured out what's happening here.

First of all, the destroyMe function in the controller is not right, it should really be

destroyMe: function(comment) {
  this.get('target').send('removeComment', comment);
}

Then, you are calling it in the template of the post.comments, but you're implementing it in the 'PostEditCommentRoute', which is a subroute of PostCommentsRoute. So pulling up the event in the PostCommentsRoute should make it work.

Now, as a overall comment about your code, there are some weird things, such as

<p>{{#linkTo 'post.comments'}}  comments{{/linkTo}}</p>  

{{render 'post.comments' comments}}

As a result, when you click on the 'comments' link, it throws an error (view is already rendered).

There are also some code in the routes which could be avoid, for example all the setupController hooks like

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

which is the default behavior, so you don't have to override it.