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()？

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' });
   }
});

把手:

<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模板中,而不是强制进入模板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');
   }
});

使用JSBin示例