Ember 2.7以降のアプリケーションビューにCSSクラスを追加するにはどうすればよいですか？

Question

ビューはエンバー2.0.0以降なくなっているが、あなたはこれを行うことができます：ビューのフォルダは、現在無視されているように、この回避策は、もはや機能しエンバーCLI 2.7以来

// app/views/application.js or app/application/view.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    classNames: [] 
}); 

は、見えます。

view:foobar@view:toplevel 

とHTMLは次のとおりです：しかし、エンバーの検査官は、まだアプリケーションビューのためにこれを示してそれはまだ図である

<div id="ember420" class="ember-view"> 
    <h2>application</h2> 
</div> 

、それをカスタマイズする方法がなければなりません。

Answer 1

アプリケーションテンプレートにコンポーネントを追加するのが最善の選択です。それを最適なソリューションにするのは、追加のアドオンやハックを必要としないということです。

もっとコンテキスト：https://github.com/emberjs/ember.js/issues/11486

// application template 
{{#app-view-substitute}} 
    {{outlet}} 
{{/app-view-substitute}} 

注：他の開発者がすでに要素の入れ子のレベルについての仮定を行っている大規模なアプリケーションのための便利ではありません。これにより、慎重に作成した場合でも、すべての要素とCSSに1つのレベルが追加され、壊れる可能性があります。 https://stackoverflow.com/a/40187809/7852

Answer 2

問題CSSで解決することができます：：代替にはjQueryのセレクタの体> .emberビュー」として

body > .ember-view { 
    height: 100%; 
} 

すぎ

Answer 3

を動作するはずですあなたはエンバー経由（jQueryのを使用することができます。 $）を使用して、アプリケーションの起動時に手動でクラスを追加します。これは動作します：

// in app/routes/application.js 
export default Ember.Route.extend({ 
    // ... 
    activate() { 
    this._super(...arguments); 
    let root = Ember.getOwner(this).get('rootElement'); 
    Ember.$(root).addClass('my-custom-class'); 
    }, 
    // ... 
}); 

を使用すると、アプリケーションのルートについて尋ねているので、deactivateフックで、この後をクリーンアップする必要はありません。

これは、現在のルートに応じてスタイルを微調整するのに特化したものです。ここでは現在のルート階層のルート要素にroute--xyzクラスを追加しますインスタンス初期化子です：

import Ember from 'ember'; 

function toCssName(routeName) { 
    return `route--${routeName.dasherize().replace(/\./g, '-')}`; 
} 

export function initialize(appInstance) { 

    Ember.Route.reopen({ 
    activate() { 
     this._super(...arguments); 
     Ember.$(appInstance.rootElement).addClass(toCssName(this.routeName)); 
    }, 
    deactivate() { 
     this._super(...arguments); 
     Ember.$(appInstance.rootElement).removeClass(toCssName(this.routeName)); 
    } 
    }); 

} 

export default { 
    name: 'css-route-name', 
    initialize 
}; 

この初期化子では、ルート要素は、常に他のアクティブなルートに加えて、クラスroute--applicationを持つことになります。私がやってしまったことである

Answer 4

：

// top level component rendered in the application template 
    didInsertElement: function() {             
    this._super(...arguments);             
    this._addIdAndCSSClassToApplicationView();            
    },                     

    _addIdAndCSSClassToApplicationView: function() {                    
    let root = Ember.getOwner(this).get('rootElement'); // Ember >= 2.3      
    let applicationView = root.querySelector('.ember-view:first-child');    

    let idclass = 'myRequiredName';          
    applicationView.id = idclass;             
    let classes = applicationView.className;           
    applicationView.className = classes + ' ' + idclass;        
    } 

口を折り返しがきれいで、これはハックですが、それは、他のはすでにネストのレベルについての仮定を行っている大規模なアプリで理にかなっていますアプリ。

はエンバー2.2で、私はこのような何かにrootラインを変更する必要がありました：

let root = Ember.$('.ember-application');