4

場所に応じて異なるレイアウトを使用する必要がある Web アプリケーションがあります。

基本的に、「プロファイル」ページ内にいる場合は、特定のアプリ レイアウトと特定のページ レイアウトを使用したいと考えています。別のページ「メッセージ」に行く場合は、別のアプリ レイアウトと別のページ レイアウトを使用したいと考えています。ページをレンダリングするには、それらを組み合わせる必要があります。

ここに画像の説明を入力

そのようなことをする方法はありますか？

profile.js (ビュー)

export default Ember.View.extend({
   appLayoutName: 'appLayoutType1',
   layoutName: 'pageLayoutType1',
   templateName: 'profile'
});

messages.js (ビュー)

export default Ember.View.extend({
   appLayoutName: 'appLayoutType2',
   layoutName: 'pageLayoutType2',
   templateName: 'messages'
});

forums.js (ビュー)

export default Ember.View.extend({
   appLayoutName: 'appLayoutType1',
   layoutName: 'pageLayoutType2',
   templateName: 'forums'
});

別の詳細として、ルートはこれらの変更に影響を与えるべきではありません。適切なレイアウトを選択するために、ページのルートにレベルを追加するべきではありません。

ありがとう！

4

2 に答える 2

2

さまざまなレイアウトをコンポーネントとして作成し、各ルートのテンプレート レベルで追加できます。次に、各テンプレートは、それが埋め込まれている特定のレイアウトとネスト順序を直接制御します。このようなもの：

  {{#app-layout-one}}
    {{#page-layout-one}}
      <h1>Profile route contents</h1>
    {{/page-layout-one}}
  {{/app-layout-one}}

一般的なアイデアを示すplnkrは次のとおりです。http://plnkr.co/edit/ULuajptCB4n93swhnwiT?p=preview

上記のように設定することもできViewますが、それはもう少し複雑かもしれません.

于 2014-09-08T22:04:45.227 に答える
0

コンセントをご利用ください。

Ember.Route.reopen({

  headerName: 'application/header',
  footerName: 'application/footer',

  renderTemplate: function () {
    this._super.apply(this, arguments);

    this.disconnectOutlet({
      parentView: 'application',
      outlet: 'header'
    });
    this.render(this.get('headerName'), {
      into: 'application',
      outlet: 'header'
    });
    this.disconnectOutlet({
      parentView: 'application',
      outlet: 'footer'
    });    
    this.render(this.get('footerName'), {
      into: 'application',
      outlet: 'footer'
    });
  }
});

App.DifferentRoute = Ember.Route.extend({
  headerName: 'different/header',
  footerName: 'different/footer'
});

このパターンをページ ヘッダーなどに拡張できます。

于 2014-10-31T02:28:18.840 に答える