CODEWITHSUNDEEP
javascriptember.js
srisonti
srisonti

Reputation: 307

EmberJS Nested resource templates not working

I have an Ember app that isn't loading a template for a route for a nested resource. Pretty sure I'm missing something incredibly obvious here, but I can't figure out what the issue is.

Whenever I go to http://localhost:4200/dashboard/appointments/new, I just get a blank page.

Here's my router.js file:

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

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

Router.map(function() {
  this.route('signup', { path: '/register' });
  this.route('login', { path: '/login' });
  this.route('logout', { path: '/logout' });

  this.resource('user', { path: '/dashboard' }, function() {
    this.resource('appointment', { path: '/appointments' }, function() {
      this.route('new', { path: '/new' });
    });
    this.resource('item', { path: '/items' }, function() {});
  });
});

export default Router;

And here's my directory structure:

|__app.js
|__controllers
| |__login.js
|__router.js
|__routes
| |__application.js
| |__login.js
| |__logout.js
| |__signup.js
| |__user
| | |__appointment
| | | |__new.js
| | |__appointment.js
| | |__item.js
| |__user.js
|__templates
| |__application.hbs
| |__components
| |__login.hbs
| |__logout.hbs
| |__partials
| |__signup.hbs
| |__user
| | |__appointment
| | | |__new.hbs
| | |__appointment.hbs
| | |__item.hbs
| |__user.hbs

I made sure that (in my templates directory), my user.hbs file and my user/appointment.hbs file both have {{outlet}}. I checked the console and the URL is working properly (there's no URLNotFound error). The only issue is that my template in templates/user/appointment/new is not being loaded. All of the other templates right now are just empty with {{outlet}} in them.

Any ideas what the issue could be? Really appreciate the help!

Upvotes: 1

Views: 408

Answers (1)

Dhaulagiri
Dhaulagiri

Reputation: 3291

Given your current routing structure you would need your new appointment template to be at templates/appointment/new.

JSBin

Another way to debug this on your own is to use the Ember Inspector plugin. Go to the URL you are trying to figure out, go the Routes section of the Inspector, check the box to limit what you see to the current route and then look at what template it is looking for under the template column. In your case it says it is looking for the template at appointment/new.

Upvotes: 2

Related Questions