Rails 4: como usar $ (document) .ready () con turbo-links

Me encontré con un problema en mi aplicación Rails 4 al intentar organizar los archivos JS "a la manera de los rieles". Anteriormente estaban dispersos en diferentes puntos de vista. Los organicé en archivos separados y los compilé con la canalización de activos. Sin embargo, acabo de enterarme de que el evento "listo" de jQuery no se activa en los clics posteriores cuando se activa el enlace turbo. La primera vez que carga una página, funciona. Pero cuando hace clic en un enlace, todo lo que está dentro ready( function($) {no se ejecutará (porque la página no se vuelve a cargar). Buena explicación: aquí .

Entonces, mi pregunta es: ¿Cuál es la forma correcta de garantizar que los eventos jQuery funcionen correctamente mientras están activados los enlaces turbo? ¿Envuelve los scripts en un oyente específico de Rails? ¿O tal vez los rieles tienen algo de magia que lo hace innecesario? Los documentos son un poco vagos sobre cómo debería funcionar esto, especialmente con respecto a la carga de múltiples archivos a través de los manifiestos como application.js.

Esto es lo que hago ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

la última línea escucha la carga de la página, que es lo que activarán los enlaces turbo.

Editar ... agregando la versión de Javascript (por solicitud):

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Edit 2 ... For Rails 5 (Turbolinks 5) se page:loadconvierte turbolinks:loade incluso se disparará en la carga inicial. Entonces podemos hacer lo siguiente:

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

Acabo de enterarme de otra opción para resolver este problema. Si carga la jquery-turbolinksgema , vinculará los eventos de Rails Turbolinks a los document.readyeventos para que pueda escribir su jQuery de la manera habitual. Simplemente agrega jquery.turbolinksjusto después jqueryen el archivo de manifiesto js (por defecto:) application.js.

Recientemente encontré la forma más limpia y fácil de entender:

$(document).on 'ready page:load', ->
  # Actions to do

O

$(document).on('ready page:load', function () {
  // Actions to do
});

EDITAR
Si ha delegado eventos vinculados al document, asegúrese de adjuntarlos fuera de la readyfunción, de lo contrario, se recuperarán en cada page:loadevento (haciendo que las mismas funciones se ejecuten varias veces). Por ejemplo, si tiene alguna llamada como esta:

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

Sácalos de la readyfunción, así:

$(document).on 'ready page:load', ->
  ...
  ...

$(document).on 'click', '.button', ->
  ...

Los eventos delegados vinculados al documentno necesitan vincularse en el readyevento.

Encontré esto en la documentación de Rails 4 , similar a la solución de DemoZluk pero un poco más corta:

$(document).on 'page:change', ->
  # Actions to do

O

$(document).on('page:change', function () {
  // Actions to do
});

Si tiene scripts externos que llaman $(document).ready()o si no puede molestarse en reescribir todo su JavaScript existente, entonces esta gema le permite seguir usando $(document).ready()TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Según las nuevas guías de rieles , la forma correcta es hacer lo siguiente:

$(document).on('turbolinks:load', function() {
   console.log('(document).turbolinks:load')
});

o, en coffeescript:

$(document).on "turbolinks:load", ->
alert "page has loaded!"

No escuches el evento $(document).readyy solo se disparará un evento. Sin sorpresas, no es necesario usar la gema jquery.turbolinks .

Esto funciona con los rieles 4.2 y superiores, no solo con los rieles 5.

NOTA: Consulte la respuesta de @ SDP para obtener una solución limpia e integrada

Lo arreglé de la siguiente manera:

asegúrese de incluir application.js antes de que se incluyan los otros archivos js dependientes de la aplicación cambiando el orden de inclusión de la siguiente manera:

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Defina una función global que maneje el enlace en application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

Ahora puedes unir cosas como:

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

Nada de lo anterior funciona para mí, resolví esto al no usar jQuery's $ (document) .ready, sino que utilicé addEventListener en su lugar.

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

Tienes que usar:

document.addEventListener("turbolinks:load", function() {
  // your code here
})

de turbolinks doc .

O usa el

$(document).on "page:load", attachRatingHandler

o utilice la función .on de jQuery para lograr el mismo efecto

$(document).on 'click', 'span.star', attachRatingHandler

ver aquí para más detalles: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

En lugar de utilizar una variable para guardar la función "lista" y vincularla a los eventos, es posible que desee activar el readyevento siempre que se active page:load.

$(document).on('page:load', function() {
  $(document).trigger('ready');
});

Esto es lo que he hecho para garantizar que las cosas no se ejecuten dos veces:

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

Creo que usar la jquery-turbolinksgema o combinar $(document).readyy / $(document).on("page:load")o usar $(document).on("page:change")solo se comporta inesperadamente, especialmente si estás en desarrollo.

Encontré el siguiente artículo que funcionó muy bien para mí y detalla el uso de lo siguiente:

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Pensé que dejaría esto aquí para aquellos que actualicen a Turbolinks 5 : la forma más fácil de arreglar su código es ir desde:

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

a:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

Referencia: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

$(document).on('turbolinks:load', ready)

Probado tanta solución finalmente llegó a esto. Este código definitivamente no se llama dos veces.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

Normalmente hago lo siguiente para mis proyectos de rails 4:

En application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

Luego, en el resto de los archivos .js, en lugar de usar $(function (){}), llamoonInit(function(){})

Primero, instale la jquery-turbolinksgema. Y luego, no se olvide de mover los archivos Javascript comprendidos desde el extremo del cuerpo de su application.html.erba su <head>.

Como se describe aquí , si ha puesto el enlace javascript de la aplicación en el pie de página por razones de optimización de velocidad, deberá moverlo a la etiqueta para que se cargue antes que el contenido de la etiqueta. Esta solución funcionó para mí.

Me encontré con mis funciones se duplicaron cuando se utiliza una función para readyy turbolinks:loadpor lo que utiliza,

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

De esa manera, sus funciones no se duplican si se admiten turbolinks