For example: Ember components allow you to add a classNames array and those classes will be added to the main div of the component. say we have this component called new-div
export default Ember.Component.extend({
classNames: ['container']
});
then if you inspect this component when rendered you will see:
<div id="ember595" class="ember-view container">
...
<div>
this is fine but my issue is what if i want to use this component as a fluid container sometimes and sometimes I might want to make it a jumbotron etc.
Is there a way to do this in the html and have the component.js apply it correctly?
{{new-div extra-classes='class1,class2'}}
then in the component.js:
export default Ember.Component.extend({
classNames: [this.get('class-names')]
});
The @dmk'solution is the cleanest one, but if your scenario it is not working you can use classNameBindings :
export default Ember.Component.extend({
classNameBindings: ['getClassNames'],
getClassNames: Ember.computed('extra-classes', function(){
return this.get('extra-classes').replace(',', ' ');
})
})
您可以通过在组件的class
属性中指定类名来添加类名:
{{new-div class="class1 class2"}}
If you're not adding too many classes, it's easy enough with class name bindings:
export default Ember.Component.extend({
classNameBindings: [
'foo:bar',
'foo:baz',
],
});
And set the value of foo:
{{new-div foo=true}}
This will toggle on all the above class names.
Of course, you could get tricky with computed properties and mapping an array. Also: I like to avoid assigning dynamic class names to components explicitly. Things become messy rather quickly.
Just as an alternative one could use something like this
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(),
});
If someone is using ember-component-css , you may want to try out the join-classes
or the local-class
attribute helper.
{{join-classes styles.myclass1 attributeValue}}
attributeValue
can be a value from the component's controller (I mean component.js
), or an item inside an each
block.
If styles.myclass1 = .class1
, and attributeValue = .dummy
, then the selectors would be available as .class1.dummy
in the styles.css .
local-class={{(concat "myclass-" myvalue)}}
If myvalue = 'part'
, then with this, the generated classname would include tree-to-component_myclass-part__sdfje2jbr2
(last part is generated id), and would be accessible in the stylesheet as .myclass-part
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.