EmberJS - Attributi con didReceiveAttrs

L' hook didReceiveAttrs può essere utilizzato dopo il metodo init e chiamato quando gli attributi del componente vengono aggiornati e non verrà eseguito quando il nuovo rendering viene avviato internamente.

Sintassi

import Ember from 'ember';

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

Esempio

L'esempio fornito di seguito descrive l'uso dell'hook didReceiveAttrs da utilizzare quando gli attributi del componente vengono aggiornati. Crea un componente con il nome post-action che verrà definito in app / components / .

Apri il file post-action.js e aggiungi il codice seguente:

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);
   },
});

Ora apri il file modello del componente post-action.hbs con il codice seguente:

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

Apri il file index.hbs e aggiungi il codice seguente:

<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}}

Crea un file index.js in app / controller / con il codice seguente:

import Ember from 'ember';

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

Produzione

Esegui il server ember; riceverai il seguente output -

Apri la console e otterrai l'output come mostrato nello screenshot qui sotto -