document.ready no activado con pjax

Question

Estoy probando pjax para una aplicación que estoy desarrollando, pero he chocado un poco contra la pared.

Tal vez estoy haciendo esto de la manera incorrecta, déjame explicarte.

En la aplicación, tengo un menú principal en la parte superior, con las diferentes secciones. Cada uno de los enlaces en este menú está habilitado para pjax, lo que significa que solo cambiará el cuerpo de la aplicación.

Normalmente, cuando hace clic en un enlace sin pjax, se iniciará el método document.ready. Lo uso para vincular eventos a botones como el siguiente ejemplo.

aquí es mi archivo 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() 

Como se puede ver en este ejemplo, cuando los "usuarios" de la página termine de cargar, se unirá un botón con un evento que se carga un formulario en un div y animalo para mostrarlo.

Sin embargo, cuando comienzo en una sección diferente del administrador y hago clic en el enlace Usuarios para mostrar este botón, el evento no está enlazado. Cuando vuelvo a cargar la página en la sección Usuarios, el documento se activa y el botón funciona bien.

¿Hay una mejor técnica para enlazar los eventos a los botones o hay alguna forma de activar document.ready en pjax?

Gracias.

Answer 1

Ok, aprendí un par de cosas ayer.

En primer lugar, al declarar coffeescript como ese, el código estará disponible solo para ese archivo y no se podrá acceder a él en ningún otro lado.

La forma más común de evitar esto es, por ejemplo

Users = 
    aMethod: -> 
     // some code 


window.Users = Users 

entonces en algún otro lugar que puede hacer

window.aMethod 

todos modos, eso fue sólo una parte del problema, la solución real utilizaba el método delegado http://api.jquery.com/delegate/, que le permite vincular elementos sin que estén allí.

Answer 2

Así es como estoy haciendo esto actualmente.

1. Utilice el enlace delegado como se indica aquí para los eventos.

2. Por otra inicialización, implementar de esta manera (en Javascript en bruto)

   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

Esto funcionará perfecta:
Todo lo que necesita hacer es incluir la secuencia de comandos después de la finalización de la solicitud 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> 

Hope it helps .. !!