Rails 4: come usare $ (document) .ready () con turbo-link

Ho riscontrato un problema nella mia app Rails 4 durante il tentativo di organizzare i file JS "alla guida". In precedenza erano sparsi in diverse viste. Li ho organizzati in file separati e li ho compilati con la pipeline delle risorse. Tuttavia, ho appena appreso che l'evento "pronto" di jQuery non si attiva ai clic successivi quando viene attivato il collegamento turbo. La prima volta che carichi una pagina funziona. Ma quando fai clic su un link, qualsiasi cosa all'interno di ready( function($) {esso non verrà eseguita (perché la pagina non si carica di nuovo). Buona spiegazione: qui .

Quindi la mia domanda è: qual è il modo giusto per garantire che gli eventi jQuery funzionino correttamente mentre i turbo-link sono attivi? Avvolgi gli script in un listener specifico per Rails? O forse le rotaie hanno della magia che la rende superflua? I documenti sono un po 'vaghi su come dovrebbe funzionare, soprattutto per quanto riguarda il caricamento di più file tramite manifest (s) come application.js.

Ecco cosa faccio ... CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

l'ultima riga ascolta il caricamento della pagina, che è ciò che i turbo link attiveranno.

Modifica ... aggiunta della versione Javascript (per richiesta):

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Modifica 2 ... Per Rails 5 (Turbolink 5) page:loaddiventa turbolinks:loade verrà attivato anche al caricamento iniziale. Quindi possiamo semplicemente fare quanto segue:

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

  ...your javascript goes here...

});

Ho appena saputo di un'altra opzione per risolvere questo problema. Se carichi la jquery-turbolinksgemma , gli eventi Rails Turbolink verranno associati agli document.readyeventi in modo da poter scrivere jQuery nel solito modo. Basta aggiungere jquery.turbolinkssubito dopo jquerynel file manifest js (per impostazione predefinita:) application.js.

Di recente ho trovato il modo più pulito e di facile comprensione per gestirlo:

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

O

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

MODIFICA
Se hai delegato eventi associati a document, assicurati di collegarli al di fuori della readyfunzione, altrimenti verranno rimbalzati su ogni page:loadevento (facendo sì che le stesse funzioni vengano eseguite più volte). Ad esempio, se hai chiamate come questa:

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

Portali fuori dalla readyfunzione, in questo modo:

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

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

Gli eventi delegati associati a documentnon devono essere associati readyall'evento.

Lo abbiamo trovato nella documentazione di Rails 4 , simile alla soluzione di DemoZluk ma leggermente più breve:

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

O

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

Se hai script esterni che chiamano $(document).ready()o se non puoi preoccuparti di riscrivere tutto il tuo JavaScript esistente, allora questo gioiello ti consente di continuare a utilizzare $(document).ready()con TurboLinks: https://github.com/kossnocorp/jquery.turbolinks

Secondo le nuove guide di binari , il modo corretto è di effettuare le seguenti operazioni:

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

o, nel coffeescript:

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

Non ascoltare l'evento $(document).readye verrà generato solo un evento. Nessuna sorpresa, nessuna necessità di usare la gemma jquery.turbolinks .

Funziona con le guide 4.2 e successive, non solo con le guide 5.

NOTA: vedere la risposta di @ SDP per una soluzione pulita e integrata

L'ho risolto come segue:

assicurati di includere application.js prima che gli altri file js dipendenti dall'app vengano inclusi modificando l'ordine di inclusione come segue:

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

Definire una funzione globale che gestisce l'associazione application.js

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

Ora puoi associare cose come:

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

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

Nessuna delle precedenti funzioni per me, ho risolto questo problema non utilizzando $ (document) di jQuery, ma invece ho usato addEventListener.

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

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

Devi usare:

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

dal turbolink doc .

O utilizzare il

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

oppure usa la funzione .on di jQuery per ottenere lo stesso effetto

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

vedi qui per maggiori dettagli: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

Invece di utilizzare una variabile per salvare la funzione "pronto" e associarla agli eventi, è possibile che si desideri attivare l' readyevento ogni volta che si page:loadattiva.

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

Ecco cosa ho fatto per assicurarmi che le cose non vengano eseguite due volte:

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

Trovo che usare la jquery-turbolinksgemma o combinare $(document).readye / $(document).on("page:load")o usare $(document).on("page:change")da solo si comporti inaspettatamente, specialmente se sei in fase di sviluppo.

Ho trovato il seguente articolo che ha funzionato benissimo per me e descrive in dettaglio l'uso di quanto segue:

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

Ho pensato di lasciarlo qui per coloro che eseguono l' aggiornamento a Turbolinks 5 : il modo più semplice per correggere il codice è passare da:

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

per:

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

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

$(document).ready(ready)  

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

Ho provato così tante soluzioni finalmente arrivate a questo. Tante volte il tuo codice non viene chiamato due volte.

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

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

Di solito faccio i seguenti progetti per i miei progetti su rotaie 4:

In application.js

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

Quindi nel resto dei file .js, invece di usare $(function (){})I callonInit(function(){})

Innanzitutto, installa jquery-turbolinksgem. E poi, non dimenticare di spostare i file Javascript inclusi dalla fine del tuo corpo application.html.erbal suo <head>.

Come descritto qui , se hai inserito il link javascript dell'applicazione nel piè di pagina per motivi di ottimizzazione della velocità, dovrai spostarlo nel tag in modo che venga caricato prima del contenuto nel tag. Questa soluzione ha funzionato per me.

Ho trovato le mie funzioni raddoppiate quando ho usato una funzione per readye turbolinks:loadquindi ho usato,

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

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

In questo modo le tue funzioni non raddoppieranno se i turbolink sono supportati!