EmberJS - DOM renderizzato con didRender
L' hook didRender viene chiamato per aggiornare il DOM quando il modello è stato renderizzato.
Sintassi
import Ember from 'ember';
export default Ember.Component.extend({
...
didRender() {
//code here
},
...
})
Esempio
L'esempio riportato di seguito descrive l'uso dell'hook didRender che effettua l'aggiornamento al DOM. 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 -