EmberJS - Atributos con didReceiveAttrs
El gancho didReceiveAttrs se puede usar después del método init y se puede llamar cuando se actualizan los atributos del componente y no se ejecutará cuando se inicie la re-renderización internamente.
Sintaxis
import Ember from 'ember';
export default Ember.Component.extend ({
...
didReceiveAttrs() {
//code here
},
...
})
Ejemplo
El ejemplo que se muestra a continuación describe el uso del gancho didReceiveAttrs que se utilizará cuando se actualicen los atributos del componente. 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: