Ember.js:如何在嵌套路由场景中刷新父路由模板? [英] Ember.js: How to refresh parent route templates in a nested route scenario?

问题描述

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

My page layout (application template) looks like this (simplified):

我将它用于不同的路线(报价列表 + 报价详细信息、客户列表 + 客户详细信息).列表显示在子导航插座中.

I use it for different routes (offer list + offer detail, customer list + customer detail). Lists are shown in the sub-navigation outlet.

我的路由器代码:

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 内容.我点击列表中的其中一项优惠，然后

shows the list and the title "Offer summary" and static html content. I click on one of the offers in the list, going to

http://.../#/offers/23

一切正常:它仍然在子导航区域显示报价列​​表以及报价的正确标题和内容.

all okay: it still shows the list of offers in the sub-navigation area and the correct title and the content of the offer.

现在我的问题:

如果我回到

http://.../#/offers

page(在菜单上使用#linkTo helper)，然后 {{outlet}}/内容区域变为空(不是之前的静态 html)并且标题仍然是 {{page-title}} 中的标题的报价/23 路线.

page (using a #linkTo helper on a menu), then the {{outlet}} / content area becomes empty (not the static html from before) and the title is still the title in {{page-title}} of the offer/23 route.

如何让我的应用重新渲染" OffersRoute renderTemplate() 中定义的模板?

How can I let my app "re-render" the template as defined in the OffersRoute renderTemplate()?

P.S.:我使用的是 Ember.js 1.0.0-RC.3

推荐答案

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

Using the built-in Index routes and maintaining the ApplicationRoute -> OffersRoute -> OfferRoute hierarchy will solve your issue.

如果您打开路由器转换日志，您将看到当导航到 Offers 时，您实际上是在输入 Offers.Index 路由:

If you turn on the router transition logging you will see that when navigating to Offers you are actually entering the Offers.Index route:

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

这意味着您可以在 OffersIndexRoute 中设置您的静态商品标题并设置静态商品内容，并且如果您从内部链接回它，它将在第一次正确设置并再次设置优惠详情页面.为此，您还必须保留 ApplicationRoute ->优惠 ->Offer {{outlet}} 层次结构，不直接将所有内容渲染到 ApplicationRoute 的 {{outlet}}.您必须保留此层次结构的原因是，通过将子项(Offer 模板)直接渲染到 Application 模板中，您可以删除 Offers 模板，并且何时您尝试返回 OffersRoute 其模板已被删除，但它什么也没显示.

This means that you can set your static Offers title and set the static Offers content in OffersIndexRoute and it will be correctly set the first time and set again if you link back to it from inside of an offer detail page. For this to work you also must preserve the ApplicationRoute -> Offers -> Offer {{outlet}} hierarchy by not directly rendering everything into the ApplicationRoute's {{outlet}}. The reason you must preserve this hierarchy is that by rendering the child (Offer template) directly into the Application template you remove the Offers template and when you try to go back to the OffersRoute its template has been removed and it shows nothing.

使用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 中的 outlet 将由 OffersIndexRoute 或 Offer 模板填充，具体取决于当前路线是.

The outlet in the offers-list-content will be filled in by the OffersIndexRoute or by the Offer template, depending on what the current route is.

允许 OfferRoute 将它的内容模板呈现到 OffersRoute 模板中，而不是强制它进入 ApplicationRoute.

Allow the OfferRoute to render it's content template into the OffersRoute template instead of forcing it into the 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 示例

这篇关于Ember.js:如何在嵌套路由场景中刷新父路由模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！