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 имеют один и тот же путь, что поведение не определено, и, вероятно, путаете уголек, думая, вы уже в пути.

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

}); 

Возможно, вам придется использовать разные розетки для отображения широкого шаблона, боковой панели и деталей.

Надеюсь, это поможет!