My page layout (application template) looks like this (simplified):
I use it for different routes (offer list + offer detail, customer list + customer detail). Lists are shown in the 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 this works so far.
http://.../#/offers
shows the list and the title "Offer summary" and static html content. I click on one of the offers in the list, going to
http://.../#/offers/23
all okay: it still shows the list of offers in the sub-navigation area and the correct title and the content of the offer.
Now my problem:
If I return to the
http://.../#/offers
page (using a #linkTo helper on a menu), then the {{outlet}} / content area becomes empty (not the static html from before) and the title is still the title in {{page-title}} of the offer/23 route.
How can I let my app "re-render" the template as defined in the OffersRoute renderTemplate()
?
P.S.: I'm using Ember.js 1.0.0-RC.3