12

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

Ember page layout

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

4

1 回答 1

6

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

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

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

这意味着您可以设置静态优惠标题并在其中设置静态优惠内容，OffersIndexRoute如果您从优惠详细信息页面内部链接回它，它将在第一次正确设置并再次设置。为此，您还必须通过不直接将所有内容渲染到's中来保留ApplicationRoute-> Offers->层次结构。您必须保留此层次结构的原因是，通过将子（模板）直接渲染到模板中，您删除了模板，并且当您尝试返回其模板时，它的模板已被删除并且它什么也不显示。Offer {{outlet}}ApplicationRoute{{outlet}}OfferApplicationOffersOffersRoute

索引路由

用于OffersIndexRoute填写ApplicationRoute's{{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填写，具体取决于当前路线是什么。OffersIndexRouteOffer

维护{{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 示例

于 2013-05-02T19:29:07.580 回答