emberコンポーネントの動的CSS？動的なCSSプロパティを渡す方法

Question

{{test-component height=height}} 

テストcomponent.hbs

<div class="flip-container "> 
    <div class="flipper"> 
     <div class="front"> 
      RED SIDE 
     </div> 
     <div class="back"> 
      BLUE SIDE 
     </div> 
    </div> 
</div> 

私は

.flip-container, .front, .back { 
    width: 10em; 
    height: 20em; 
} 

私はbind-attrヘルパーを見て、今いるこのCSSプロパティを変更するとしますそれは廃止されました。

Answer 1

属性に直接class属性を渡すことができます。

{{test-component height=height myclass=myclass }} 

テストcomponent.hbs

<div class={{myclass}}> 
    <div class="flipper"> 
     <div class="front"> 
      RED SIDE 
     </div> 
     <div class="back"> 
      BLUE SIDE 
     </div> 
    </div> 
</div> 

チェックアウトこのtwiddle。

Answer 2

heightプロパティに従ってインラインCSSを変更したいとします。そのアプローチにある場合：

1. あなたは要素テンプレート内 のスタイル属性に動的な値を渡すことができます。<div style="height: {{height}}px;"></div>あなたは （https://ember-twiddle.com/2c0da8a6438816c8219597f293a423b8?openFiles=templates.application.hbs%2Cthese 燃えさし-ひねり[この 燃えさし-責め]で作業例を見つけることができます）。
2. あなたのコンポーネントでheightへの変化を観察し、それに応じてCSSOM を変更することができます：

this.get('element').style.height = '10px';は1が優先されなければならないいくつかの引数がありました。テンプレートバインディングは読みやすく、ember-wayのように感じる人もいます。一方、CSSOMを変更するのではなく、style-src: unsafe-inline CSP（Content-Security-Policy）が必要です。

もちろん、可能であれば、常にCSSクラスを使用する必要があります。