Nested Routes help


#1

Hi Ember community!

I have companies and job sheets, a company has many job sheets and a job sheet belongs to a company.

The app has a rails api as a back end and I have the companies data showing on /companies and I have the router set so that I can get to the comapnies job sheets like this /companies/1/job-sheets however this is where I get stuck I don’t know how to create the route for this.

I have this error when I go to that url

Error while processing route: company.job-sheets Error

This is my router,js

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

var Router = Ember.Router.extend({
  location: config.locationType
});

export default Router.map(function() {
  this.route('companies', { path: '/' }, function() {});
    this.route('company', { path: '/:company_id' }, function() {
      this.route('job-sheets');
  });
});

I have no idea where I put the route file I thought It would have been under company/job-sheets.js but that dosn’t seem to work.

Any ideas?

Thanks


#2

I think the path for companies should be ‘companies’ or just take out that path and it will default to ‘companies’. A good way to debug this stuff is to look at the ember debugger chrome extension and see what routes are being generated.


#3

@varblob I have the path set to ‘/’ so it uses that as the root path when you first go to the app.

That page has the list of companies on which all works, then I click on the companys name and it takes me to localhost:4200/companies/1/job-sheets but then then I get the error I showed in my first post in the console.


#4

The error suggests to me that the router doesn’t recognize the current url as being under companies.

I recommend using https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi and checking the routes section.

If you want to start on /companies have your index route transition to /companies


#5

How would I do that, sorry I am new to ember!


#6

use the beforeModel hook in your IndexRoute:

beforeModel: function() {
  this.transitionTo('companies');
}

http://guides.emberjs.com/v1.10.0/routing/redirection/


#7

Another option is to use the redirect hook with the replaceWith method. Using replaceWith will ensure the user doesn’t get an extra history entry, which would also enable the Back button.

redirect: function(){
    this.replaceWith('companies');
}