Rails 4: cómo usar $(documento).ready () con turbo-enlaces

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.

Edit ...adición de 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 ...Para Rails 5 (Turbolinks 5) page:load se convierte en turbolinks:load e incluso se disparará con la carga inicial. Así que podemos hacer lo siguiente:

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

  ...your javascript goes here...

});

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

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

O

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

EDITAR
Si tiene eventos delegados vinculados a document, asegúrese de adjuntarlos fuera de la función ready, de lo contrario obtendrán rebote en cada evento page:load (causando que las mismas funciones se ejecuten varias veces). Por ejemplo, si tienes llamadas como esta:

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

Sacarlos de la función ready, como esto:

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

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

Los eventos delegados vinculados al document no necesitan estar vinculados al evento ready.

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

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

O

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

Si tienes scripts externos que llaman a $(document).ready() o si no te molesta reescribir todo tu JavaScript existente, entonces esta gema te permite seguir usando $(document).ready() con TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

De acuerdo con las nuevas guías rails , 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 escuche el evento $(document).ready y solo se disparará un evento. Sin sorpresas, no hay necesidad de usar el jquery .turbolinks gema.

Esto funciona con rails 4.2 y superiores, no solo con rails 5.

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

Lo fijé de la siguiente manera:

Asegúrese de incluir la aplicación.js antes de que los otros archivos js dependientes de la aplicación se incluyan 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 .

Define una función global que maneja 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 enlazar 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 el document(documento) de jQuery.listo, pero usa addEventListener en su lugar.

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

O bien utilizar el

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

O usar jQuery .on function to achieve the same effect

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

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

En lugar de usar una variable para guardar la función "ready" y vincularla a los eventos, es posible que desee activar el evento ready cada vez que page:load se active.

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

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

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

Encuentro que usar la gema jquery-turbolinks o combinar $(document).ready y $(document).on("page:load") o usar $(document).on("page:change") por sí mismo se comporta inesperadamente especially 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 actualizan 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

Tienes Que usar:

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

De turbolinks doc.

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

$(document).ready(ready)  

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

 <%= link_to 'Edit', edit_article_path(article), 'data-no-turbolink' => true %>

Tal vez puedas usar así para usar "listo", al igual que cerrar tu turbolink.

Primero, instale la gema jquery-turbolinks. Y luego, no se olvide de mover los archivos Javascript incluidos desde el final del cuerpo de su application.html.erb a 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í.

Probado tantas solución finalmente llegó a esto. Este número de su 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 la .archivos js, en lugar de usar $(function (){}) llamo onInit(function(){})