Ember nested routes

Question

I have a model plant and a related model planting which should have urls like:

/plants
/plants/new
/plants/some-plant-id/planting/new

The route to add planting works in url and displays the correct add form. Problem is the submit with action on planting/new does not work.

Console

ember.debug.js:19699 Uncaught Error: Nothing handled the action 'savePlanting'. 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 am guessing the issue is with the way I constructed the route in router.js but not sure. There is only one controller- app/controllers/application.js which is minimal

Here is some of my code

app/routes/planting/new.js

import Ember from 'ember';

export default Ember.Route.extend({

  model() {    
    return this.store.createRecord('planting');
  },

  actions: {

    savePlanting(newPlanting) {
      console.log("trying to save...");
      newPlanting.save().then(() => this.transitionTo('planting'));
    },

    willTransition() {
       //rollbackAttributes() removes the record from the store
       //if the model 'isNew'
      this.controller.get('model').rollbackAttributes();
    }
  }
});

router.js

...
this.route('plants', function() {
  this.route('new');
  this.route('edit', { path: '/:plant_id/edit' });

  this.route('planting',  { path: '/plants/:plant_id/planting' },   function(){
    this.route('new');
  });

});
...

Incidentally, my template directories are like

app/templates/plants
app/templates/plants/new.hbs
app/templates/plants/planting/new.hbs  //plantings dir in plants

routes directories are

app/routes/plants
app/routes/planting

What am I doing wrong?

Just put {{this}} in your templates to see which controller it´s trying to use, furthermore install ember inspector so you can see better debug routes templates and controllers, you´ll see necessary naming conventions etc. and it´s easier to understand what and where ember expects things. Ember always bubbles actions from controller -> route if you´re not preventing it, if the error occurs the action can´t be found in either of those. — Christian Stengel
adding {{this}} to template gives me (generated plants.planting.new controller) which makes sense from what you said about controllers bubbling to route. Since I have not created controller for plant or planting, what do I do? create controllers? start using components? if I create controller, where would I put controller file that contains the savePlanting action given this dot notation? — Sean Kelley
the generated shows it´s using the controller for plants/planting/new so the action should be in the matching route it gets more clear if you would have named ...plating/new differently (that would be another problem route names should be unique), so "app/routes/planting/new.js" should be app/routes/plants/plating/new, check ember console if the path shown "generated route" so you know if the file is missing or needs to be generated, it´s a low easier if you generate them by command line btw. — Christian Stengel

michalsnik michalsnik · Accepted Answer · 2016-09-01T22:52:53

I think that your problem is that you want to use action from your route in template.

In order to do so you should use route-action helper (https://github.com/DockYard/ember-route-action-helper).

Otherwise it will look for an action in controller :)

Ember nested routes

2 Answers