Ember.js: How to refresh parent route templates in a nested route scenario? -

my page layout (application template) looks (simplified):

i use different routes (offer list + offer detail, customer list + customer detail). lists shown in sub-navigation outlet.

my router's code:

app.router.map(function () {     //...     this.resource('offers', function () {         this.resource('offer', { path: '/:offer_id' });     }); } 

my routes:

app.offersroute = ember.route.extend({    model: function () {        return app.offer.find();    },    rendertemplate: function (controller, model) {        this.render('offer-list', {             into: 'application', outlet: 'sub-navigation', controller: 'offers' });        this.render('offer-list-title', { into: 'application', outlet: 'page-title' });        this.render('offer-list-content', { into: 'application' });    } });  app.offerroute = ember.route.extend({    model: function (params) {       return app.offer.find(params.offer_id);    },    rendertemplate: function () {       this.render('offer-title', { into: 'application', outlet: 'page-title' });       this.render('offer-content', { into: 'application' });    } }); 

now works far.

http://.../#/offers 

shows list , title "offer summary" , static html content. click on 1 of offers in list, going to

http://.../#/offers/23 

all okay: still shows list of offers in sub-navigation area , correct title , content of offer.

now problem:

if return

http://.../#/offers 

page (using #linkto helper on menu), {{outlet}} / content area becomes empty (not static html before) , title still title in {{page-title}} of offer/23 route.

how can let app "re-render" template defined in offersroute rendertemplate()?

p.s.: i'm using ember.js 1.0.0-rc.3

using built-in index routes , maintaining applicationroute -> offersroute -> offerroute hierarchy solve issue.

if turn on router transition logging see when navigating offers entering offers.index route:

app = ember.application.create({   log_transitions: true }); 

this means can set static offers title , set static offers content in offersindexroute , correctly set first time , set again if link inside of offer detail page. work must preserve applicationroute -> offers -> offer {{outlet}} hierarchy not directly rendering applicationroute's {{outlet}}. reason must preserve hierarchy rendering child (offer template) directly application template remove offers template , when try go offersroute template has been removed , shows nothing.

index route

use offersindexroute fill in applicationroute's {{outlet}} , {{outlet page-title}}.

js:

//this renders title , main content offers app.offersindexroute = ember.route.extend({   rendertemplate: function (controller, model) {     this.render('offer-list-title', { into: 'application', outlet: 'page-title' });     this.render();   } });  app.offersroute = ember.route.extend({    model: function () {        return app.offer.find();    },    rendertemplate: function (controller, model) {      this.render('offer-list', {           into: 'application', outlet: 'sub-navigation', controller: 'offers' });       // render in offersindexroute instead      //this.render('offer-list-title', { into: 'application', outlet: 'page-title' });       this.render('offer-list-content', { into: 'application' });    } }); 

handlebars:

<script type="text/x-handlebars" data-template-name="offer-list-content">   {{outlet}} </script>  <script type="text/x-handlebars" data-template-name="offers/index">   offers content </script>   

the outlet in offers-list-content filled in offersindexroute or offer template, depending on current route is.

maintaining {{outlet}} hierarchy

allow offerroute render it's content template offersroute template instead of forcing applicationroute.

app.offerroute = ember.route.extend({    model: function (params) {       return app.offer.find(params.offer_id);    },    rendertemplate: function () {      this.render('offer-title', { into: 'application', outlet: 'page-title' });       // preserve hierarchy , render offers {{outlet}}, default      //this.render('offer-content', { into: 'application' });      this.render('offer-content');    } }); 

working jsbin example