2012-03-14 16 views
17

La mayoría de las veces, me puso algo de código JavaScript en $(document).ready hacer algunos piensos de inicialización en la página, como enlazar evento, etc.¿Dónde colocar la página inicializar javascript cuando se usa pjax?

Pero ahora me gustaría utilizar pjaxhttps://github.com/defunkt/jquery-pjax para algunos de mis páginas.

Con pjax, porque solo hay una parte de la página que se actualiza, $(document).ready no se volverá a llamar.

Pude activar manualmente el script de inicialización en el evento pjax:end, pero también quiero saber si hay una mejor solución para eso.

Gracias.

Respuesta

0

creo que lo mejor es, probablemente, sólo para hacer lo que ha dicho y gancho con el código de inicio específica página hasta los "pjax: fin" del evento. De esa forma, esencialmente hará el mismo trabajo que antes y se ejecutará contra cualquier html que se haya cargado en el DOM.

55

Puede enlazar fácilmente todo el código existente tanto a los document.ready y pjax: eventos de éxito, así:

Antes:

$(document).ready(function() { 
    // page load stuff 
}); 

Después:

$(document).on('ready pjax:success', function() { 
    // will fire on initial page load, and subsequent PJAX page loads 
}); 
+1

Gracias por esto! – neersighted

+1

Loool. me encanta :) – Zeck

+6

¿Qué puedo hacer si el código de inicialización es diferente para cada página? – shreyj

4

I han surgido con esta solución ordenada. Iniciar por primera vez mediante la creación de un espacio de nombres para sus carpetas en el ámbito global:

// Binder for PJAX init functions 

$.fn.bindPJAX = {}; // Create namespace 

function bindPJAX(functionName) { 
    // Check function existence, then call it 
    return $().bindPJAX[functionName] && $().bindPJAX[functionName](); 
} 

se unen entonces una devolución de llamada a PJAX hace clic:

$(document).ready(function(){ 
    if ($.support.pjax) { 
    $('a[data-pjax]').on('click', function(event) { 

     var container = '#main'; 
     var emptyRoute = 'feed'; // The function that will be called on domain's root 

     // Store current href without domain 
     var link = event.currentTarget.href.replace(/^.*\/\/[^\/]+\//, ''); 
     var target = link === "" ? emptyRoute : link; 

     // Bind href-specific asynchronous initialization 
     $(document).on('ready pjax:success', container, function() { 
     bindPJAX(target); // Call initializers 
     $(document).off('ready pjax:success', container); // Unbind initialization 
     }); 

     // PJAX-load the new content 
     $.pjax.click(event, {container: $(container)}); 

    }) 
    } 
}); 

Cuando esto está configurado, se puede proceder a extender el $.fn.bindPJAX Objeto para agregar funciones que coincidan con su nombre de ruta. Por ejemplo, esto, en el ámbito global, se llamará cuando se accede a través de http://www.yourdomain.com/admin PJAX:

$.extend($.fn.bindPJAX, { 
    admin: function(){ 
    // Initialization script for /admin route 
    } 
}); 

También debe considerar un repliegue SECO viable cuando PJAX falla o no se admite, como el lanzamiento de la función init correcta en primero pageload comprobando window.location en javascript, o tal vez hardcoding en vistas de su aplicación.

+0

se ve muy bien, Me va a probarlo. – larryzhao

Cuestiones relacionadas