Emberjs-comp-lifecycle-didupdate-attr
提供:Dev Guides
didUpdateAttrsによる属性変更
_didUpdateAttrs_フックは、コンポーネントの属性が変更され、コンポーネントを再レンダリングする前に呼び出されたときに使用できます。
構文
import Ember from 'ember';
export default Ember.Component.extend ({
...
didUpdateAttrs() {
//code here
},
...
})
例
以下の例では、コンポーネントの属性が変更されたときに使用される_didUpdateAttrs_フックの使用について説明します。 _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サーバーを実行します。次の出力が表示されます-
コンソールを開くと、以下のスクリーンショットに示すように出力が得られます-