ember 2.0コンポーネントで動的クラス名を作成するにはどうすればよいですか？

Question

例： Emberコンポーネントを使用すると、classNames配列を追加できます。これらのクラスは、コンポーネントのメインdivに追加されます。 は、我々は、このコンポーネントが呼び出されていると言う新しい-DIVあなたが表示されますレンダリングされたときに、このコンポーネントを検査した場合、その後

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

：

<div id="ember595" class="ember-view container"> 
... 
<div> 

これは大丈夫ですが、私の問題は私がしたい場合は何ですこのコンポーネントを液体コンテナとして使用することがあります。時にはそれをジャンボトロンなどにすることもできます。

htmlでこれを行い、component.jsを正しく適用する方法はありますか？ component.jsで、その後

{{new-div extra-classes='class1,class2'}} 

：

export default Ember.Component.extend({ 
    classNames: [this.get('class-names')] 
}); 

Answer 1

あなたのコンポーネントに class属性内でそれらを指定するだけで、クラス名を追加することができ

：ちょうど代わるものとして

{{new-div class="class1 class2"}} 

Answer 2

このようなものを使用できます

export default Ember.Component.extend({ 
attributeBindings: ['style'], 

    style: function(){ 
     return new Ember.Handlebars.SafeString('class="foo bar"'); 
    }.property(), 
}); 

// NOT sure on this one untested 
export default Ember.Component.extend({ 
attributeBindings: ['classNames'], 

    classNames: function(){ 
     return 'foo bar'; 
    }.property(), 
}); 

Answer 3

@dmk'solutionはきれいなものですが、あなたがclassNameBindingsを使用することができます動作していない、あなたのシナリオ場合：

export default Ember.Component.extend({ 
    classNameBindings: ['getClassNames'], 
    getClassNames: Ember.computed('extra-classes', function(){ 
    return this.get('extra-classes').replace(',', ' '); 
    }) 
}) 

Answer 4

誰かがエンバー成分-CSSを使用している場合、あなたはjoin-classesかを試してみたいことlocal-class属性ヘルパー。

{{join-classes styles.myclass1 attributeValue}} 

attributeValueコンポーネントのコントローラ（私はcomponent.jsを意味する）、又はeachブロック内の項目の値とすることができます。

styles.myclass1 = .class1た場合、およびattributeValue = .dummy、そしてセレクタはStyles.cssをで​​として利用できるようになります。

local-class={{(concat "myclass-" myvalue)}} 

myvalue = 'part'場合、これで、生成されたクラス名は、tree-to-component_myclass-part__sdfje2jbr2（最後の部分は、IDが生成される）を含むであろう、そして.myclass-partなどのスタイルシートにアクセス可能になります。