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

Question

我的页面布局（应用程序模板）看起来像这样（简化）：

我将它用于不同的路线（报价清单+报价详情，客户清单+客户详细信息）。列表显示在子导航插座中。

我路由器的代码：

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()中的定义“重新呈现”模板？

P.S。：我正在使用Ember.js 1.0.0-RC.3

Answer 1

使用内置的Index路由并维护ApplicationRoute - ＆gt; OffersRoute - ＆gt; OfferRoute层次结构将解决您的问题。

如果您打开路由器转换日志记录，则会在导航到Offers时看到您实际进入Offers.Index路由：

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

这意味着您可以设置静态优惠标题并在OffersIndexRoute中设置静态优惠内容，如果您从优惠详情页面内部链接回来，它将在第一时间正确设置并再次设置。为此，您还必须保留ApplicationRoute - ＆gt; Offers - ＆gt; Offer {{outlet}}层次结构，不直接将所有内容呈现在ApplicationRoute的{​​{1}}中。您必须保留此层次结构的原因是，通过将子项（{{outlet}}模板）直接呈现到Offer模板中，您可以删除Application模板，并在尝试返回{Offers模板时1}}它的模板已被删除，它没有显示任何内容。

指数路线

使用OffersRoute填写OffersIndexRoute的{​​{1}}和ApplicationRoute。

JS：

{{outlet}}

车把：

{{outlet page-title}}

//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' }); } }); 中的插座将由<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模板填写，具体取决于当前路线。

维护OffersIndexRoute层次结构

允许Offer将其内容模板呈现到{{outlet}}模板中，而不是强制它进入OfferRoute。

OffersRoute

Working JSBin example