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

}); 

您可能不得不使用不同的插座來顯示寬模板，邊欄和細節。

希望它有幫助！