12

私のページ レイアウト (アプリケーション テンプレート) は次のようになります (簡略化)。

Emberページのレイアウト

さまざまなルート (オファー リスト + オファーの詳細、顧客リスト + 顧客の詳細) に使用します。リストはサブナビゲーションアウトレットに表示されます。

私のルーターのコード:

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 コンテンツを表示します。リスト内のオファーの 1 つをクリックして、

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

すべて問題ありません。サブナビゲーション領域にオファーのリストが表示され、正しいタイトルとオファーの内容が表示されます。

今私の問題：

に戻ったら

http://.../#/offers

ページ (メニューで #linkTo ヘルパーを使用) の場合、{{outlet}} / コンテンツ領域は空になり (以前の静的 html ではありません)、タイトルはオファーの {{page-title}} のタイトルのままです。 /23 ルート。

OffersRoute で定義されているように、アプリにテンプレートを「再レンダリング」させるにはどうすればよいrenderTemplate()ですか?

PS: Ember.js 1.0.0-RC.3 を使用しています

4

1 に答える 1

6

組み込みのルートを使用し、 -> ->階層をIndex維持すると、問題が解決します。ApplicationRouteOffersRouteOfferRoute

ルーター遷移ログをオンにすると、ナビゲートするOffersときに実際にOffers.Indexルートに入っていることがわかります。

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

これは、静的なオファーのタイトルを設定し、静的なオファーのコンテンツを設定できることを意味します。OffersIndexRoute最初は正しく設定され、オファーの詳細ページ内から再度リンクすると再度設定されます。これが機能するためには、すべてを'sに直接レンダリングしないことで、 ApplicationRoute-> Offers->階層も保持する必要があります。この階層を保持する必要がある理由は、子 (テンプレート) をテンプレートに直接レンダリングすることでテンプレートを削除し、そのテンプレートに戻ろうとすると削除され、何も表示されないためです。Offer {{outlet}}ApplicationRoute{{outlet}}OfferApplicationOffersOffersRoute

インデックス ルート

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によって埋められます。OffersIndexRouteOffer

{{outlet}}階層の維持

コンテンツ テンプレートをに強制するのではなく、 がOfferRouteそのコンテンツ テンプレートをテンプレートにレンダリングできるようにします。OffersRouteApplicationRoute

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 に答える