ember.js - Ember JS : Access to component html from within the component js

Question

有没有办法从组件JS文件中访问组件初始化的内部内容。我本质上希望能够获得 yield 。

例如，假设我有一个带有此模板的 hbs:

{{#my-component}}
  <span>bla bla {{foo}}</span>
{{/my-component}}

然后我希望在我的组件中访问上面的跨度，如下例所示，在 theInnerHtml 中我想获取初始化组件内的内容。

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.get('innerHTML'); // "<span>bla bla {{foo}}</span>"
  }
});

Answer 1

您可以使用 Ember 中内置的 jQuery 来获取您要查找的元素的 jQuery 对象，

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.$('span').html();
  }
});

或者你可以只使用 Ember 组件的 element 属性: http://emberjs.com/api/classes/Ember.Component.html#property_element

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.element;
  }
});