Wie mache ich dynamische Klassennamen in einer Ember 2.0-Komponente?

Question

Zum Beispiel: Ember-Komponenten ermöglichen das Hinzufügen eines classNames-Arrays, und diese Klassen werden dem Hauptteil der Komponente hinzugefügt. sagen wir haben diese Komponente neu div

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

genannt

dann, wenn Sie diese Komponente überprüfen, wenn Sie sehen gemacht wird:

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

das ist in Ordnung, aber mein Problem ist, was passiert, wenn ich will Verwenden Sie diese Komponente manchmal als Flüssigkeitsbehälter und manchmal möchte ich sie zu einem Jumbotron usw. machen.

Gibt es eine Möglichkeit, dies in HTML zu tun und die component.js korrekt anwenden zu lassen?

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

dann in der component.js:

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

Answer 1

Sie Klassennamen hinzufügen können, indem sie einfach in dem class Attribut auf Ihrer Komponente festgelegt wird:

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

Answer 2

Gerade als eine Alternative könnte so etwas verwenden

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

Die @dmk'solution ist die sauberste, aber wenn Ihr Szenario ist es nicht funktioniert Sie classNameBindings verwenden können:

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

Answer 4

Wenn jemandglut-Komponenten-CSS verwendet, können Sie die join-classes ausprobieren möchten oder das local-class Attributhelfer.

{{join-classes styles.myclass1 attributeValue}} 

attributeValue kann ein Wert aus der Controller der Komponente sein (I bedeuten component.js) oder ein Element im Innern eines each Block.

Wenn styles.myclass1 = .class1 und attributeValue = .dummy, dann würden die Wähler als .class1.dummy im styles.css zur Verfügung.

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

Wenn myvalue = 'part', dann mit diesem, würde die erzeugte Klassennamen umfassen tree-to-component_myclass-part__sdfje2jbr2 (letzter Teil erzeugt id) und würde im Stylesheet als .myclass-part zugänglich sein.