我的页面布局(应用程序模板)看起来像这样(简化版):
我将其用于不同的路由(报价列表+报价详情,客户列表+客户详情)。列表显示在子导航出口。
我的路由器代码:
App.Router.map(function () {
//...
this.resource('offers', function () {
this.resource('offer', { path: '/:offer_id' });
});
}
我的路线:
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' });
}
});
目前为止这个有效。
http://.../#/offers
显示列表和标题“Offer summary”以及静态html内容。我点击列表中的一个优惠,跳转到
http://.../#/offers/23
一切正常:它仍然在子导航区域中显示优惠列表以及正确的标题和优惠内容。
现在我的问题是:
如果我返回到
http://.../#/offers
如果使用菜单上的 #linkTo 辅助功能进入页面,那么 {{outlet}} / 内容区域会变为空(不像之前静态的 HTML),而且标题仍然是在 offer/23 路由中 {{page-title}} 的标题。
我该如何让我的应用程序 "重新渲染" 在 OffersRoute 中定义的模板,即 renderTemplate()
?
附注:我正在使用 Ember.js 1.0.0-RC.3 版本