Ember.js:如何在嵌套路由场景中刷新父路由模板？

Question

我的页面布局(应用程序模板)如下所示(简化):



我将它用于不同的路线(报价列表 + 报价详细信息、客户列表 + 客户详细信息)。列表显示在子导航 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

Answer 1

使用内置 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