Ember.js 2.9 simple nested routes error on full page reload

Question

I am a beginner to Ember.js so I took the Codeschool course 'Try Ember'. So following this course I actually get an error.

My router.js file looks like this:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('orders', function(){
    this.route('order', {path: '/:order_id'});
  });

});

export default Router;

Now as far as I understand from the tutorial I have two routes orders.js and order.js with templates templates/orders.hbs and templates/orders/order.hbs respectively.

orders.js file:

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return [
      { id: '1', name: 'Vlatko'},
      { id: '2', name: 'Mila'}
    ];
  }
});

order.js file:

import Ember from 'ember';

export default Ember.Route.extend({
  model(params){
    return [
      { id: '1', name: 'Vlatko'},
      { id: '2', name: 'Mila'}
    ].findBy('id', params.order_id);
  }
});

templates/orders.hbs file:

<h2>Hello from orders</h2>

{{#each model as |order|}}
  <p>
    {{#link-to 'orders.order' order}}
      Order {{order.id}}
    {{/link-to}}
  </p>
{{/each}}

{{outlet}}

templates/orders/order.hbs file:

<p>Order {{model.id}} for {{model.name}}</p>

So everything is pretty simple and works well, but when I try to do a full page reload(enter directly on the page) /orders/1 it raises two errors

Error while processing route: orders.order No model was found for 'order' Error: No model was found for 'order'

and

Error: No model was found for 'order'

Now, I've searched a lot on the web and I can't find the same error.

An additional hint: This only happens when I use nested routes. If for instance I have something like this in my router.js:

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('orders');
  this.route('order', {path: '/orders/:order_id'});
});

export default Router;

I get no error.

Answer 1

Your order.js file should be orders/order.js. Your problem is that ember doesn't find your route so you get the default route. The default model hook with a dynamic segment order_id will basically do store.findRecord('order', theId), and so you get the error that the model order is not defined because you don't use ember-data.