Emberjs-comp-lifecycle-didrecv-attr

EmberJS-didReceiveAttrsを持つ属性

didReceiveAttrsフックは、initメソッドの後に使用でき、コンポーネントの属性が更新されたときに呼び出され、再レンダリングが内部で開始されたときに実行されません。

構文

import Ember from 'ember';

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

例

以下の例では、コンポーネントの属性が更新されるときに使用される_didReceiveAttrs_フックの使用について説明します。 _app/components/_の下に定義される_post-action_という名前のコンポーネントを作成します。

_post-action.js_ファイルを開き、次のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend ({
   didInitAttrs(options) {
      console.log('didInitAttrs', options);
   },

   didUpdateAttrs(options) {
      console.log('didUpdateAttrs', options);
   },

   willUpdate(options) {
      console.log('willUpdate', options);
   },

   didReceiveAttrs(options) {
      console.log('didReceiveAttrs', options);
   },

   willRender() {
      console.log('willRender');
   },

   didRender() {
      console.log('didRender');
   },

   didInsertElement() {
      console.log('didInsertElement');
   },

   didUpdate(options) {
      console.log('didUpdate', options);
   },
});

今、次のコードでコンポーネントテンプレートファイルpost-action.hbsを開きます-

<p>name: {{name}}</p>
<p>attrs.data.a: {{attrs.data.a}} is in console</p>
{{yield}}

_index.hbs_ファイルを開き、次のコードを追加します-

<div>
   <p>appName: {{input type = "text" value = appName}}</p>
   <p>Triggers: didUpdateAttrs, didReceiveAttrs, willUpdate, willRender,
      didUpdate, didRender</p>
</div>

<div>
   <p>data.a: {{input type = "text" value = data.a}}</p>
</div>
<hr>

{{post-action name = appName data = data}}
{{outlet}}

次のコードで_app/controller/_の下に_index.js_ファイルを作成します-

import Ember from 'ember';

export default Ember.Controller.extend ({
   appName:'finddevguides',
   data: {
      a: 'output',
   }
});

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsコンポーネントdidReceiveAttrs Attr

コンソールを開くと、以下のスクリーンショットに示すように出力が得られます-

Ember.jsコンポーネントdidReceiveAttrs Attr