Question

我想将字体大小从一个组件更改为另一个组件我有组件 - change-font-size。

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

和组件 - example-text。

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

组件change-font-size没有看到example-text组件的html DOM。

Ember 动态生成了DOM，我们没有 document.ready 。

我需要的一个例子 - http://ruseller.com/lessons/les748/demo.html

Answer 1

这是一个有效的example

Ember就此而言React你不应该直接操纵DOM。

您需要设置change-font-size组件以将font-size传递给组件嵌套组件。 change-font-size将是增加和减少字体大小的按钮。

<强>组件/转换字体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);
    }
  }
});

<强>模板/组件/改变的字体-size.hbs

<button {{action 'increaseFontSize'}}> + </button>
<button {{action 'decreaseFontSize'}}> - </button>

{{yield fontSize}}

<强>组件/示例-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`);
  })
});

<强>模板/组件/示例-text.hbs 标题一些文字。

然后以这种方式使用组件。您希望将fontSize从change-font-size组件传递到任何嵌套组件。

{{#change-font-size as |fontSize|}}
    {{example-text fontSize=fontSize}}
{{/change-font-size}}

将字体大小从一个组件更改为另一个组件

1 个答案: