带有 didInsertElement 的第三方库

你可以使用这个didInsertElement钩子初始化和将第三方库附加到 DOM 元素中。这可以在组件的元素被创建、插入到 DOM 且可通过s()方法访问时调用。

语法

import Ember from 'ember';

export default Ember.Component.extend ({
   ...
   didInsertElement() {
      //code here    
   },
   ...
})

示例

下面给出的示例介绍了在与第三方库集成时使用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 服务器；你将收到以下输出 −

当你点击按钮时，它将指定文本中的 fadeIn 和 fadeOut 效果 −