what - ¿Dónde colocar el javascript de inicialización de página al usar pjax?

what is the ideal place to load the external javascript file in your html document

Question

La mayoría de las veces, puse un código javascript en $(document).ready para hacer algunas cosas de inicialización en la página, como el enlace de eventos, etc.

Pero ahora me gustaría usar pjax https://github.com/defunkt/jquery-pjax para algunas de mis páginas.

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

Podría 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.

Answer 1

Creo que su mejor apuesta es probablemente hacer lo que dijo y conectar el código de inicio específico de su página al evento "pjax: end". De esa manera, esencialmente hará el mismo trabajo que antes y se ejecutará contra cualquier HTML que se haya cargado en el DOM.

Answer 2

Puede vincular fácilmente todo su código existente a los eventos document.ready y pjax: success, así:

Antes de:

$(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
});

Answer 3

Se me ha ocurrido esta solución aseada. Primero comienza creando un espacio de nombres para tus 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]();
}

Luego vincular una devolución de llamada a los clics de PJAX:

$(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 se configura, puede extender el objeto $.fn.bindPJAX para agregar funciones que coincidan con el nombre de su ruta. Por ejemplo, esto, en el ámbito global, se llamará cuando acceda a http://www.yourdomain.com/admin través de PJAX:

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

También debe considerar un repliegue DRY viable cuando PJAX falla o no es compatible, como lanzar la función de inicio correcta en la primera carga de página al revisar window.location en javascript, o tal vez codificarlo en las vistas de su aplicación.