1. WIKI教程
2. 学习EmberJS
3. 使用didInsertElement的第三方库(Third-Party Libraries with didInsertElement)

使用didInsertElement的第三方库(Third-Party Libraries with didInsertElement)

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

语法 (Syntax)

import Ember from 'ember';
export default Ember.Component.extend ({
   ...
   didInsertElement() {
      //code here    
   },
   ...
})

例子 (Example)

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

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

import Ember from 'ember';
var inject = Ember.inject;
export default Ember.Component.extend ({
   age: 'IoWiki',
   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}}

输出 (Output)

运行ember服务器; 你会收到以下输出 -

单击该按钮时，它将在文本上指定fadeIn和fadeOut效果 -