我的页面布局(应用程序模板)如下所示(简化):
我将它用于不同的路线(报价列表 + 报价详细信息、客户列表 + 客户详细信息)。列表显示在子导航 socket 中。
我的路由器代码:
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
显示列表和标题“报价摘要”和静态 html 内容。我点击列表中的其中一项优惠,前往
http://.../#/offers/23
一切正常:它仍然在子导航区域中显示报价列表以及报价的正确标题和内容。
现在我的问题:
如果我回到
http://.../#/offers
页面(使用菜单上的 #linkTo 助手),然后 {{outlet}}/内容区域变为空(不是之前的静态 html)并且标题仍然是报价的 {{page-title}} 中的标题/23 路线。
如何让我的应用“重新渲染” OffersRoute 中定义的模板
renderTemplate()
?PS:我正在使用 Ember.js 1.0.0-RC.3
最佳答案
使用内置 Index
路线和维护ApplicationRoute
-> OffersRoute
-> OfferRoute
层次结构将解决您的问题。
如果您打开路由器转换日志记录,您将在导航到 Offers
时看到这一点。您实际上是在输入 Offers.Index
路线:
App = Ember.Application.create({
LOG_TRANSITIONS: true
});
这意味着您可以在 OffersIndexRoute
中设置您的静态商品标题并设置静态商品内容。如果您从报价详细信息页面内部链接回它,它将在第一次正确设置并再次设置。为此,您还必须保留 ApplicationRoute
-> Offers
-> Offer
{{outlet}}
通过不直接将所有内容渲染到 ApplicationRoute
中的层次结构的 {{outlet}}
.您必须保留此层次结构的原因是通过将子项(Offer
模板)直接渲染到 Application
中。您删除的模板 Offers
模板,当您尝试返回 OffersRoute
时它的模板已被删除,它什么也没显示。索引路线
使用
OffersIndexRoute
填写 ApplicationRoute
的 {{outlet}}
和 {{outlet page-title}}
.JS:
//this renders the title and the main content for 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 this 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>
在offers-list-content
的 socket 将由OffersIndexRoute
填写或通过 Offer
模板,取决于当前路由是什么。维护
{{outlet}}
等级制度允许
OfferRoute
将其内容模板渲染到 OffersRoute
模板而不是强制它进入 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 the hierarchy and render into the Offers {{outlet}}, which is the default
//this.render('offer-content', { into: 'application' });
this.render('offer-content');
}
});
Working JSBin example
关于Ember.js:如何在嵌套路由场景中刷新父路由模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16342616/