Here is a working example
Ember and for that matter React you should not be manipulate the DOM directly.
What you need todo is setup your change-font-size
component to pass down the font-size
to the components nested components. The change-font-size
would be the buttons to increase and decrease the font-size.
components/change-font-size.js
export default Ember.Component.extend({
fontSize: 14,
actions: {
increaseFontSize() {
return this.set('fontSize', this.get('fontSize') + 1);
},
decreaseFontSize() {
return this.set('fontSize', this.get('fontSize') - 1);
}
}
});
templates/components/change-font-size.hbs
<button {{action 'increaseFontSize'}}> + </button>
<button {{action 'decreaseFontSize'}}> - </button>
{{yield fontSize}}
components/example-text.js
export default Ember.Component.extend({
fontSize: 14,
displayFontSize: Ember.computed('fontSize', function(){
let newFontSize = parseInt(this.get('fontSize'), 10);
return new Ember.Handlebars.SafeString(`font-size: ${newFontSize}px`);
}),
h3FontSize: Ember.computed('fontSize', function(){
// keep the h3 font size 50% bigger.
let newFontSize = parseInt(this.get('fontSize') * 1.5, 10);
return new Ember.Handlebars.SafeString(`font-size: ${newFontSize}px`);
})
});
templates/components/example-text.hbs
The Title
some text.
Then uses the components this way. You want to pass the fontSize from the change-font-size component to the to any nested components.
{{#change-font-size as |fontSize|}}
{{example-text fontSize=fontSize}}
{{/change-font-size}}