using emberjs new-router-V3 and #with helper to access events defined in a different route

Question

I have this working jsfiddle. The EmBlog.PostsEditRoute has a destroyPost event which I want to call with an action helper in the 'post/show.hbs' which is the template for the EmBlog.PostsShowRoute.

I am using #with helper to change scope in the template as suggested here. It doesn't destroy the object and throws no error.

 <script type="text/x-handlebars" data-template-name="posts/show">
   {{#with EmBlog.PostsEditController}}
      <a href='#' {{action destroyPost this}}> Destroy</a>
   {{/with}}
 </script>

 EmBlog.PostsShowRoute = Ember.Route.extend({

 });

 EmBlog.PostsEditRoute = Ember.Route.extend({
    events: {
      destroyPost: function(context) {
       var post = context.get('content'); 
        post.deleteRecord();
        post.get('store').commit();
        this.transitionTo('posts');
      }
    }
 });

Answer 1

I think this is basically because you have to define your event handler in the EmBlog.PostsShowRoute or in the PostsRoute if you want it to be accessible in an other PostsXXX view. see http://emberjs.com/guides/templates/actions/ for details.

(the use of the #with helper here seems wrong here BTW, as your reference is about something quite old). I would simply do

<script type="text/x-handlebars" data-template-name="posts/show">
  <a {{action destroyPost content}}> Destroy</a>
</script>

Here is the modified fiddle: http://jsfiddle.net/Qn3ry/4/

Note that when you try to destroy a post which is in the fixtures, it reappears when you transition to posts/index. This is simply because the post is not destroyed in the fixtures, and when entering to the PostIndexRoute, App.Post.find() will reload it again.