Components should be tested using integration tests. In this recipe, we'll look at a simple example of a component that changes the size of the text.
In a new application, create a new component called
font-sizer
:$ ember g component font-sizer
This will generate a new component called
font-sizer
. This component will be used to resize text.Update the
font-sizer.js
file in thecomponents
folder:// app/components/font-sizer.js import Ember from 'ember'; export default Ember.Component.extend({ textInfo: 'Hello World', attributeBindings: ['style'], style: Ember.computed('size',function() { const size = this.get('size'); return new Ember.Handlebars.SafeString("font-size: "+ size); }) });
All components render as
div
tags inside of templates. We can add different attributes to thesediv
tags if needed. In this case, theattributeBindings
property will add astyle
tag. Thestyle
tag will be a computed property that updates whenever a...