0

I want the following layout: enter image description here

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.

cjroebuck
  • 2,273
  • 4
  • 30
  • 46

3 Answers3

0

and what about changing your routes ?

this.resource('courses');
this.resource('course', { path: '/courses/:course_id' });
this.route('allcourses', { path: '/courses' });
fanta
  • 1,489
  • 13
  • 15
0

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'});
Kingpin2k
  • 47,277
  • 10
  • 78
  • 96
  • Yeh, I wanted to clobber the usual courses route with the allcourses template, but then fall back to the usual courses template once at the /courses/:id route. Doesn't seem like its possible without defining a new url for 'allcourses' – cjroebuck Dec 13 '13 at 16:39
  • I'm torn between saying very defined routes or black magic ui based on which route you're in. (like the comment in edpaez answer) – Kingpin2k Dec 13 '13 at 17:10
0

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!

edpaez
  • 1,593
  • 1
  • 12
  • 22
  • I like this idea, and you could just show/hide the side bar (from the courses route) based on the route – Kingpin2k Dec 13 '13 at 17:08