MDL ready event

Question

MDL sta aggiornando i suoi componenti al caricamento della pagina, quindi l'attributo con autofocus perde il suo focus. Voglio mettere a fuoco questo input dopo che MDL ha terminato il rerendering.

Sto cercando di ascoltare un po 'pagina pronto evento (codepen):

$('input#srch').one('componentDidUpdate', function(){console.log('ready')}); 

non funziona né con $(document) né $(document.body) né $('.mdl-layout') selettori.
Ho cercato su google per eventi simili ma senza fortuna, mi manca qualcosa?
Certo, posso usare setTimeout ma non penso che dovrebbe essere una soluzione

Grazie.

Answer 1

sono sicuro che si poteva ascoltare l'evento mdl-componentupgraded:

$('input#srch').bind('mdl-componentupgraded', function(){console.log('ready')}); 

Answer 2

È possibile ascoltare l'evento mdl-componentupgraded sull'elemento di layout, .mdl-ayout.

$(document).ready(function() { 
    $('.mdl-layout').on('mdl-componentupgraded', function(e) { 
     if ($(e.target).hasClass('mdl-layout')) { 
      alert('ready'); 
     } 
    }); 
}); 

Uso on invece di one. La tua pagina potrebbe avere più elementi da aggiornare. Usando one stai per prendere solo il primo aggiornamento. Con on il gestore verrà chiamato più volte a causa di un bubbling degli eventi. Controllare e.target per rispondere all'aggiornamento specifico dell'elemento di layout.

Utilizzare una richiamata $(document).ready(). Attendi che il DOM sia pronto prima di collegare i gestori ai suoi elementi. In caso contrario, il selettore $('.mdl-layout') potrebbe non corrispondere e il gestore eventi potrebbe non collegarsi.

Answer 3

/* Check if the material design has finished the rendering */ 

var mdlLoaded = setInterval(function(){ 
    if(typeof document.querySelector('.mdl-js-layout') !== 'undefined') init() 
}, 100) 

function init() { 
    clearInterval(mdlLoaded) 
    alert('ready') 
}