Cambio de atributo con didUpdateAttrs

El gancho didUpdateAttrs se puede utilizar cuando los atributos del componente han cambiado y se han llamado antes de volver a renderizar el componente.

Sintaxis

import Ember from 'ember';

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

Ejemplo

El ejemplo que se muestra a continuación describe el uso del gancho didUpdateAttrs que se utilizará cuando los atributos del componente hayan cambiado. Cree un componente con el nombre de acción posterior que se definirá en app / components / .

Abra el archivo post-action.js y agregue el siguiente código:

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

Ahora abra el archivo de plantilla de componente post-action.hbs con el siguiente código:

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

Abra el archivo index.hbs y agregue el siguiente código:

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

Cree un archivo index.js en app / controller / con el siguiente código:

import Ember from 'ember';

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

Salida

Ejecute el servidor ember; recibirá el siguiente resultado:

Abra la consola y obtendrá el resultado como se muestra en la captura de pantalla a continuación: