Ember Route cannot find model

#1

Hi all,

I’m having an issue with loading a model into a route. This is a legacy app with some convoluted code, so I’ll try to add some context to the situation so it makes sense.

I’m trying to load an organisational-unit (UK spelling) into the dashboard route.

router.js

  this.route('producer', {path: '/orgs/:org_id'}, function() {
    this.route('dashboard');
  }

routes/producer/dashboard.js

  model(params) {
    return this.get('store').findRecord('organisational-unit', params.org_id);
  }

The model organisational-unit exists.

When I try to access the route orgs/1/dashboard as an example, I get the following error in the web console.

-private.js:12702 Uncaught Error: No model was found for 'org'
    at Class._modelFactoryFor (-private.js:12702)
    at Class.modelFor (-private.js:12686)
    at InternalModel.get (-private.js:4543)
    at InternalModel.get (-private.js:4548)
    at Class._fetchRecord (-private.js:11366)
    at _fetchRecord (-private.js:11452)
    at Class._flushPendingFetchForType (-private.js:11553)
    at Map.forEach (<anonymous>)
    at Class.flushAllPendingFetches (-private.js:11430)
    at invoke (backburner.js:341)

I thought that by specifying the modelName in findRecord would determine the model that would be used.

Am I wrong? What should I be doing instead?

Thanks in advance!

#2

It sounds like the problem is not with the dashboard route that you showed, but with its parent route. The one that handles the /orgs/1 part of the URL.

#3

Because the param for :org is associated with the parent route the child route will not get the param by default. I just tested this in a twiddle and in your example the dashboard route will have { } passed to its params. Instead you need to ask the parent for their params:

// app/routes/producer/dashboard.js
import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    console.log(params); // => { }
    let parentParams = this.paramsFor('producer');
    console.log(parentParams); // => { org_id: "1" }
  }
});

However, this is not the actual problem you are having because any route that has a dynamic segment that ends in _id will be assumed by Ember to be an ember-data model type. In your case a model of type org. It would seem the default route for a dynamic segment like this is to use ember-data to fetch the model type with that ID.

To bypass this default behavior you will need to make a Route for producer and no-op its model() hook:

// app/routes/producer.js
import Route from '@ember/routing/route';

export default Route.extend({
  model() { }
});

(A Route without a model() hook defined is not enough.)

Once you have that then this.paramsFor('producer').org_id will be available to the dashboard route.

1 Like
#4

Thanks, @sukima! Your response was the solution. :smile: