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'); } });
Comments
Post a Comment