Emberjs-comp-lifecycle-thirdparty-lib

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: 'finddevguides',
   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サーバーを実行します。次の出力が表示されます-

Ember.jsコンポーネントdidInsert属性

あなたがボタンをクリックすると、それはテキストにfadeInとfadeOut効果を指定します-

Ember.jsコンポーネントdidInsert属性