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

问题描述

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

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

我的路由器的代码：

  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'，{
进入：'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.f ind（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）标题仍然是报价/ 23路线的{{page-title}}中的标题。

我如何让我的应用程序按照定义重新渲染模板在OfferRoute renderTemplate（）？

PS：我正在使用Ember.js 1.0.0 -RC.3

解决方案

使用内置的索引路线并维护 ApplicationRoute - > OfferRoute - > OfferRoute 层次结构将解决您的问题。

如果您打开路由器转换日志记录，您将看到当导航到优惠您实际上输入了 Offers.Index 路线：

 code> App = Ember.Application.create（{
 LOG_TRANSITIONS：true 
}）; 
  

这意味着您可以设置静态优惠标题，并将静态优惠内容设置为 OffersIndexRoute ，它将被首次正确设置并重新设置，如果从报价详细页面内部链接到它。为此，您还必须保留 ApplicationRoute - > 优惠 - > 优惠 {{outlet}} 层次结构，不直接将所有内容复制到 ApplicationRoute 的 {{出口}} 。您必须保留此层次结构的原因是通过将子（ Offer 模板）直接呈现到您删除的应用程序模板中优惠模板，当您尝试返回 OfferRoute 时，其模板已被删除，并且没有显示。 / p>



索引路线

使用 OffersIndexRoute 填写 ApplicationRoute 的 {{outlet}} 和 {{outlet page-title}} 。

JS：

  /这提供了优惠的标题和主要内容
 App.OffersIndexRoute = Ember.Route.extend（{
 renderTemplate：function（controller，model）{
 this.render（'offer-列表标题'，{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'} ）; 
 
 //在OffersIndexRoute中渲染此代码
 //this.render('offer-list-title'，{into：'application'，outlet：'page-title'} ）; 
 
 this.render（'offer-list-content'，{into：'application'}）; 
} 
}）; 
  

Handlebars：

 code>< script type =text / x-handlebarsdata-template-name =offer-list-content> 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =offers / index> 
提供内容
< / script> 
  

offers-list-content 将由 OffersIndexRoute 或 Offer 模板填充，具体取决于当前路由。 p>

维护 {{outlet}} 层次结构

OfferRoute 将其内容模板呈现到 OfferRoute 模板中，而不是强制它进入 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'}）; 
 
 //保留层次结构并呈现给Offer {{outlet}}，这是默认的
 //this.render('offer-内容'，{into：'application'}）; 
 this.render（'offer-content'）; 
} 
}）; 
  

工作JSBin示例

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.

My router's code:

App.Router.map(function () {
    //...
    this.resource('offers', function () {
        this.resource('offer', { path: '/:offer_id' });
    });
}

My Routes:

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

Now this works so far.

http://.../#/offers

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.

Now my problem:

If I return to the

http://.../#/offers

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.

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

P.S.: I'm using Ember.js 1.0.0-RC.3

解决方案

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

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

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.

Index route

Use OffersIndexRoute to fill in the ApplicationRoute's {{outlet}} and the {{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>  

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.

Maintaining {{outlet}} hierarchy

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

Working JSBin example

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