This is an example of how to set different styles into a template element or binding them to a component.
View Twiddle | Copy Twiddle | View Gist
Original idea of this README taken from @rwjblue
This is an example of how to set different styles into a template element or binding them to a component.
View Twiddle | Copy Twiddle | View Gist
Original idea of this README taken from @rwjblue
import Ember from 'ember'; | |
export default Ember.Controller.extend({ | |
appName:'Ember Twiddle' | |
}); |
import Ember from 'ember'; | |
export default Ember.Component.extend({ | |
attributeBindings: [ | |
'bgStyle:style' | |
], | |
bgColor: '#222222', | |
bgStyle: Ember.computed('bgColor',function() { | |
return (`background-color:${this.get('bgColor')};text-align:center; font-size:20px;`).htmlSafe(); | |
}), | |
textColor: '#ffffff', | |
textStyle: Ember.computed('textColor',function() { | |
return (`color:${this.get('textColor')}`).htmlSafe(); | |
}) | |
}); |
{ | |
"version": "0.4.11", | |
"dependencies": { | |
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js", | |
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js", | |
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js" | |
} | |
} |