ember.js - Mix resource routes with plain routes for non standard nested layout

Question

I want the following layout:

So when at /courses I display all courses in a screen-wide template, however when a user navigates to a course e.g. /courses/2, it then becomes a nested view with the list of courses on the left hand side and the course detail page in the main area.

I tried the following setup but can't get it to work:

this.resource('courses', function() {
    this.resource('course', { path: '/:course_id' });
});
this.route('allcourses', {path: '/courses'});

with the following route definitions:

App.AllcoursesRoute = App.Route.extend({
  model: function() {
    return this.store.find('course');
  },
  renderTemplate: function() {
    this.render('allcourses', {
      into: 'application'
    })
  }
});

App.CoursesRoute = App.Route.extend({
  model: function() {
    return this.modelFor('allcourses');
  },
  renderTemplate: function() {
    this.render('courses', {
      into: 'application'
    })
  }
});

App.CourseRoute = App.Route.extend({
  model: function(params) {
    return this.store.find('course', params.course_id);
  },
  renderTemplate: function() {
    this.render('course', {
      into: 'courses'
    });
  }
});

Currently I am getting the 'allcourses' template when at /courses however clicking on each course link tries to render the course template into an outlet in the allcourses template rather than the courses template which is what I want to happen.

Answer 1

Keeping in mind kingpin2k's answer and removing the allcourses route:

What about using the CoursesIndexRoute to show the 'wide' template of all courses. And using CourseRoute to show both the side bar of all courses (using the content and controller from its parent route) and the course details.

App.CourseRoute = Ember.Route.extend({

  renderTemplate: function() {
    //the main content
    this.render('course', {
      outlet: 'course',
    });
    // the sidebar
    var controller = this.controllerFor('courses');
    this.render('side-bar', {
      into: 'courses',
      outlet: 'side-bar',
      controller: controller
    });
  }

});

You may have to use different outlets for displaying the wide template, the sidebar and the details.

Hope it helps!

Answer 2

and what about changing your routes ?

this.resource('courses');
this.resource('course', { path: '/courses/:course_id' });
this.route('allcourses', { path: '/courses' });

Answer 3

both courses and allcourses have the same path, that behavior is undefined, and probably confusing ember into thinking you are already in the route.

this.resource('courses', function() {  // this defaults to /courses
    this.resource('course', { path: '/:course_id' });
});
this.route('allcourses', {path: '/courses'});