Ember controller: nothing handled the action

Question

I looked through related posts for hours, but could not find the right answer to fix the problem I'm having.

I keep getting the error:

Uncaught Error: Nothing handled the action 'edit'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.

I think that the controller is handling things wrong, or it's bubbling up to a wrong route?

App.EventDetailsController = Ember.ObjectController.extend({
   isEditing: false,

actions: {
    edit: function() {
        this.set('isEditing', true);
    },

    doneEditing: function() {
        this.set('isEditing', false);
    }
    }
});


App = Ember.Application.create();

    App.Router.map(function() {
   // put your routes here
  this.route('events', {path: '/events'});
  this.route('createevent', {path: '/createevent'});
  this.route('eventdetails', {path: ':eventdetails_id'});
});

App.EventsRoute = Ember.Route.extend({
model: function() {
    return events;
}
});

App.EventDetailsRoute = Ember.Route.extend({
model: function(params) {
    return events.findBy('id', params.eventdetails_id);
}
});

Does anyone know why this wouldn't work?

Answer 1

You probably want to define your routes like this:

App.Router.map(function() {
    this.resource('events', function() {                            // /events         <-- your event listing
        this.resource('event', {path: ':event_id'}, function() {    // /events/1       <-- your event details
            this.route('edit');                                     // /events/1/edit  <-- edit an event
        }); 
        this.route('create');                                       // /events/create  <-- create your event
    });
});

But aside from that, note that actions bubble up through the Routes, so try moving your actions handler to the EventDetailsRoute instead.

Read the part in the guide that talks about it here: http://emberjs.com/guides/templates/actions/#toc_action-bubbling

App.EventDetailsRoute = Ember.Route.extend({
    actions: {
        edit: function() {
            this.set('isEditing', true);
        },

        doneEditing: function() {
            this.set('isEditing', false);
        },

        //or maybe better:
        toggleEditing: function() {
            this.toggleProperty('isEditing');
        }
    },

    model: function(params) {
        return events.findBy('id', params.eventdetails_id);
    }
});