ルートが最初にロードされたときに、親要素にクラスを設定するにはどうすればよいですか？

Question

ロードされた最初のルートが 'index'、 'list'または 'list/index'である場合にうまく動作するEmberデモアプリケーションを持っていますが、ロードされた最初のルートが 'list/show'コードはhttps://github.com/DougReeder/beta-listです。デモはhttps://ember-demo.surge.shです。問題を確認するには、640pxより狭いウィンドウを設定し、サーフをhttps://ember-demo.surge.sh/list/5にしてください。詳細パネルではなく、リストパネルが表示されます。

経路が 'list/show'の場合、クラス 'panelList'と 'panelDetail'のdivもクラス 'right'を持つ必要があります。

panelListとpanelDetailが親の 'list'テンプレートによって作成されるため、これをテンプレートに設定できません。私がpanelListとpanelDetailを子テンプレート 'list/index'と 'list/show'に移動すると、 'list/index'から 'list/show'に行くと再描画され、ひどいパフォーマンスヒットになります。

現在、私は 'didTransition'アクションを使用してクラス 'right'を切り替えます。これは、 'list/index'から 'list/show'へ、 'list/show'が初期ルートのときに両方とも呼ばれます。残念ながら、 'list/show'が最初のルートである場合、 'didTransition'が呼び出されたときにDOM要素は存在しません。

私は解決策に二つの経路を思い描くことができますが、どちらかを実装する方法がわからない：

1. クラストグルDOM要素が存在した後に発生したいくつかのアクションに「正しいです」。

2. 'list'テンプレートに条件コードを挿入します。実際の経路が 'list/show'の場合は、 'panelList'と 'panelDetail'にクラス 'right'を設定します。

提案ですか？

Answer 1

回答現在のあなたは、ルートに基づいて変化したスタイルで、リンク以外の要素をレンダリングするためにlink-to helperを使用することができますエンバーのv2.12.0

のよう。 activeClass、current-when、およびtagNameのプロパティを使用すると、基本的には、どのルート上にあるかに応じて、その要素のスタイルを設定できます。たとえば、panelList divをレンダリングするには：

{{#link-to tagName='div' classNames='panelList' activeClass='right' current-when='list/show'}} 
    More markup 
{{/link-to}} 

Answer 2

空のコンポーネントでトリックが大好きです。 didInsertElementとwillDestroyElementフックでは、親要素からCSSクラスを追加したり削除したりすることができます。ここでは、コードは次のとおりです。

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    bodyClass: '', 
    didInsertElement() { 
     const bodyClass = this.get('bodyClass'); 
     if (bodyClass) { 
      Ember.$('body').addClass(bodyClass); 
     } 
    }, 
    willDestroyElement() { 
     const bodyClass = this.get('bodyClass'); 
     if (bodyClass) { 
      Ember.$('body').removeClass(bodyClass); 
     } 
    } 
}); 

私は親要素にクラスを適用するには、この

{{body-class bodyClass='player-page-active'}} 

のように（私の例では、それはplayerルートのテンプレートだ）テンプレートでそれを使用するには、this.$().parent()を使用することができますが、ボディを使用する方がより信頼性があります。このコンポーネントは空のdivを作成しますが、それは問題ではありません（まれに、classNamesと必要に応じてCSSで修正することができます）。

Answer 3

SukimaはcurrentRouteNameを調べることを提案しました。私はhschillig's solutionを見つけました。コントローラでは、私はisShow機能作成：テンプレートで

export default Ember.Controller.extend({ 
    routing: Ember.inject.service('-routing'), 

    isShow: function() { 
    var currentRouteName = this.get('routing').get('currentRouteName'); 
    return currentRouteName === 'list.show'; 
    }.property('routing.currentRouteName'), 

を、私は今ifヘルパーを使用します。

<div class="panelList {{if isShow 'right'}}"> 

RustyTomsの答えはで、コントローラに機能を追加する必要がなくなります意味論的ではないという費用。