ember.js - 将资源路由与非标准嵌套布局的普通路由混合

Question

我想要以下布局：

因此，在/courses时，我会在屏幕范围的模板中显示所有课程，但是当用户导航到课程时，例如/courses/2，然后它成为一个嵌套视图，左侧是课程列表，主区域是课程详细信息页面。

我尝试了以下设置但无法使其正常工作：

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

具有以下路线定义：

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'
    });
  }
});

目前我在/课程时会收到'allcourses'模板，但是点击每个课程链接会尝试将课程模板渲染到allcourses模板中的插座而不是我希望发生的课程模板。

Answer 1

如何更改路线？

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

Answer 2

courses和allcourses都有相同的路径，这种行为是未定义的，并且可能会让ember误以为你已经在路线中。

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

Answer 3

记住kingpin2k的答案并删除allcourses路线：

如何使用CoursesIndexRoute显示所有课程的“广泛”模板。 并使用CourseRoute显示所有课程的侧栏（使用其父路线中的内容和控制器）和课程详细信息。

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
    });
  }

});

您可能需要使用不同的插座来显示宽模板，侧边栏和详细信息。

希望它有所帮助！