document.ready non attivato con pjax

Question

Sto provando pjax per un'applicazione che sto sviluppando ma ho colpito un muro.

Forse sto andando su questo nel modo sbagliato, lasciatemi spiegare.

Nell'app, ho un menu principale in alto, con le diverse sezioni. Ciascuno dei link in questo menu è abilitato per pjax, il che significa che cambierà solo il corpo dell'applicazione.

Normalmente, quando si fa clic su un collegamento senza pjax, verrà attivato il metodo document.ready. Lo uso per associare eventi a pulsanti come nell'esempio seguente.

Ecco il mio file di users.js.coffee

loaded = false; 
$ -> 
    $("#btn_new_user").bind "click", (event) -> 
    if not loaded 
     @path = $('#btn_new_user').attr("path") 
     $("#new-users-container").load(@path) 
     loaded = true 
    $("#new-users-container").slideToggle() 

Come si può vedere in questo esempio, quando gli "utenti" pagina termine del caricamento, si legherà un pulsante con un evento che caricare un modulo in un div e animalo per mostrarlo.

Tuttavia, quando avvio in una sezione diversa dell'amministratore e faccio clic sul collegamento Utenti per visualizzare questo pulsante, l'evento non è vincolato. Quando ricarico la pagina nella sezione Utenti, il documento viene attivato e il pulsante funziona correttamente.

C'è una tecnica migliore per associare gli eventi ai pulsanti o c'è un modo per attivare document.ready su pjax?

Grazie.

Answer 1

Ok, ho imparato un paio di cose ieri.

In primo luogo, la dichiarazione di coffeescript del genere renderà il codice disponibile solo per quel file e non accessibile altrove.

Il modo più comune per aggirare questo è, ad esempio

Users = 
    aMethod: -> 
     // some code 


window.Users = Users 

poi in qualche altro luogo si può fare

window.aMethod 

in ogni caso, che era solo una parte del problema, la vera soluzione stava usando il metodo delegato http://api.jquery.com/delegate/, che consente di associare elementi senza che siano presenti.

Answer 2

Ecco come lo sto facendo attualmente.

1. Utilizzare il collegamento delegato come indicato qui per gli eventi.

2. Per altro l'inizializzazione, implementare in questo modo (in Javascript grezzo)

   window.pjax_load = function() { 
       $('#foo').do_whatever(); 
       ... 
   } 
   
   $(document).ready(function() { 
       // setup events etc 
   
       window.pjax_load(); 
       $('a').pjax("#container"); 
       $('#container').on('pjax:end', function() { window.pjax_load(); }); 
   }); 
   

Answer 3

questo funzionerà perfetto:
Tutto quello che dovete fare è includere lo script dopo il completamento della richiesta pjax.

Include Pjaxstandalone.js here then 

<script type='text/javascript'> 
    pjax.connect({ 
     'container': 'content', 
     'beforeSend': function(){console.log("before send");}, 
     'complete': function(){ 
      console.log("done!"); 
      // Your custom script here 
     } 
    }); 
</script> 

Spero che aiuti .. !!