EmberJS 2 route dynamic segment in not nested routes undefined

Question

Really new to ember and trying to setup basic (in my mind) routes.

I have calendars resource and I want to display individual calendars.

My app/router.js has the following:

this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
    this.route('show');
    this.route('edit');
});
this.route('calendars', function(){
    this.route('create');
});

Folders are as following:

app/routes: [
  calendars: [create, index],
  calendar: [edit, show]
]
app/templates: [
  calendars: [create, index]
  calendar: [edit, show]
]

In app/routes/calendar/show.js:

import Ember from 'ember';
export default Ember.Route.extend({
    model(params) {
        return this.store.findRecord('calendar', params.calendar_id);
    }
});

Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :

when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5 (a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
- If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
- If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined

How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p

Edit [2]:

I am trying this now and I think it kinda works, but looks ugly:

this.route('calendars',{ path: '/calendars'}, function(){
    this.route('create');
});
this.route('calendar', { path: '/' }, function () {
    this.route('show', { path: '/calendars/:calendar_id/show' });
    this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});

Jonathan Jansen Jonathan Jansen · Accepted Answer · 2016-10-26T16:27:16

Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.

It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.

Try explicitly define your route path with the parameters as per ember docs: https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/

this.route('calendar', function () {
    this.route('show', { path: '/:calendar_id/show' });
    this.route('edit', { path: '/:calendar_id/edit' });
    this.route('create');
});

EmberJS 2 route dynamic segment in not nested routes undefined

1 Answers