Ember 1.13、コンポーネント内のクラス名の順序

Question

SVGスプライトのアイコンをレンダリングするための単純なコンポーネントを作成しました。このコンポーネントには、スタイルをグローバルに管理するためのデフォルトのCSSクラス（.svg-icon）が必要です。また、クラス名を介して 'class'属性を使用してコンテキスト依存スタイルを追加することもできます。

JS：

App.SvgIconComponent = Ember.Component.extend 
    layoutName: 'components/svg-icon' 
    classNames: ['svg-icon'] 
    tagName: 'svg' 
    attributeBindings: ['width', 'height', 'fill'], 

    width: 16 
    height: 16 
    fill: 'currentColor' 

テンプレート：

<use xlink:href="#svg-icon-{{name}}"/> 

使用法：

{{svg-icon name="facebook" class="social__icon" width="14" height="14"}} 

HTML出力：

<svg id="ember1012" width="14" height="14" fill="currentColor" class="social__icon ember-view svg-icon"> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-facebook"></use> 
</svg> 

問題はEmberがデフォルトのクラス（.svg-icon）をクラスリストの最後にプッシュしたことです。しかし、カスケードに関するいくつかの問題を避けるためには、このクラスがクラスリストの最初に必要です（class = "svg-icon social__icon ember-view"）。達成することは可能ですか？

私はclassNameBindingsプロパティでクラス名を設定できますが、この場合は 'class'とは異なる属性を使用する必要があります。ネイティブの 'class'属性の使用が望ましい

Thnx。

Answer 1

{{svg-icon name="facebook" classNames="social__icon" width="14" height="14"}} 

以上、これを試してみては動作しますが、それはクラス属性を使用していません。あなたの要件に合っていない。

あなたの要件に合わない場合は、initメソッドで手動でclassNamesを設定してみてください。

init(){ 
    this._super(...arguments); 
    console.log(' Classess ',this.get('classNames')); //You will get classNames, you can do rearrange the classNames array 
    this.get('classNames').unshiftObject('svg-icon'); //to force svg-icon to be first in classNames array.  
    } 

アップデート1

のinit、上記（）は動作しません。だから私はclassNamesの値が最後に追加されると信じています。ネイティブclassを使用して最初にAFAIKを実行することはできません。しかし、その後、あなたの条件

のために私はclassNameBindingsプロパティでクラス名を設定することができることを、知っているが、この場合には、私はいくつかは、あなたが異なって言及することができます

「クラスの異なる属性を使用する必要があります。特定の属性のクラス名はtrueです。

{{my-component is_social__icon=false }} 

とmy-component.js

classNameBindings:['is_social__icon:social__icon'] 

内部のアップデート2
1）あなたは、あまりにもclassNameBindings

export default Ember.Component.extend({ 
    classNameBindings: ['isEnabled:enabled:disabled'], 
    isEnabled: false 
}); 

isEnabledに真と偽の値のクラス名を指定することができます - 真 - その後、 enabledクラスn AME isEnabled - 偽 - それはdisabledクラス名

2が含まれます）あなたも、唯一の偽の値を追加するクラス名を指定することができます。

classNameBindings: ['isEnabled::disabled'], 

3）指定可能な複数のプロパティ

classNameBindings:['isSocialIcon':'social__icon','isActive':'selected'] 

、コンポーネントにisSocialIconとisActiveプロパティの値を提供することができます。 isActiveがtrueに解決された場合

{{my-component isSocialIcon=true isActive=(unless social.inactive) }} 

することは、それは私のコンポーネントへのクラスsocial__icon selectedを追加します。

参考：https://guides.emberjs.com/v1.13.0/components/customizing-a-components-element/#toc_customizing-class-names