带有 didInsertElement 的第三方库

您可以使用此 didInsertElement 钩子初始化第三方库并将其附加到 DOM 元素中。当组件的元素已创建并插入 DOM 中并可使用 s() 方法访问时，可以调用此钩子。

语法

import Ember from 'ember';

export default Ember.Component.extend ({
   ...
   didInsertElement() {
      //代码在这里    
   },
   ...
})

示例

下面给出的示例描述了与第三方库集成时使用 didInsertElement 钩子的方法。创建一个名为 post-action 的组件，该组件将在 app/components/ 下定义。

打开 post-action.js 文件并添加以下代码 −

import Ember from 'ember';
var inject = Ember.inject;

export default Ember.Component.extend ({
   age: 'Tutorialspoint',
   actions: {
      pressed: function () {
         this.$("#test").fadeIn("slow");
      }
   },
   
   didInsertElement: function () {
      Ember.run.scheduleOnce('afterRender', this, function () {
         this.$("#test").fadeOut("slow");
      });
   }
});

现在使用以下代码打开组件模板文件 post-action.hbs −

<div id = "test">This is {{age}}</div>  
<button {{action "pressed"}}>
   Press Me  
</button>
{{yield}}

打开 index.hbs 文件并添加以下代码 −

{{post-action}}
{{outlet}}

输出

运行 ember 服务器；您将收到以下输出 −

单击按钮时，它将指定文本上的淡入和淡出效果 −

emberjs_component.html