0

I want to change the font size from one component to another component.
I have component - change-font-size.

<h3>change-font-size.hbs</h3>
<button>+</button><button>-</button>

And component - example-text.

<h3>example-text.hbs</h3>
<p class="special-text">some text</p>.

Component change-font-size does not see html DOM of example-text component.

Ember generated the DOM dynamically, and we don't have document.ready.

An example of what I need - http://ruseller.com/lessons/les748/demo.html

0

1 Answer 1

0

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}}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.