Rails 5: jak używać $ (document) .ready () z łączami turbo

Turbolinks zapobiega $(document).ready()uruchamianiu normalnych zdarzeń podczas wszystkich wizyt na stronie poza początkowym ładowaniem, co omówiono tutaj i tutaj . Jednak żadne z rozwiązań w połączonych odpowiedziach nie działa z Railsami 5. Jak mogę uruchomić kod na każdej wizycie na stronie, tak jak w poprzednich wersjach?

Zamiast słuchać readyzdarzenia, musisz podłączyć się do zdarzenia uruchamianego przez Turbolinks przy każdej wizycie na stronie.

Niestety Turbolinks 5 (który jest wersją, która pojawia się w Rails 5) został przepisany i nie używa tych samych nazw zdarzeń, co w poprzednich wersjach Turbolinks, przez co wymienione odpowiedzi zawodzą. To, co teraz działa, to odsłuchiwanie turbolinks: load event w następujący sposób:

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

Natywny JS:

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});

W szynach 5 najłatwiejszym rozwiązaniem jest zastosowanie:

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

Zamiast $(document).ready. Działa jak marzenie.

To jest moje rozwiązanie, nadpisanie jQuery.fn.ready, a następnie $(document).readydziała bez żadnych zmian:

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

(Dla skryptu kawowego)

Używam: $(document).on 'turbolinks:load', ->

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

Oto rozwiązanie, które działa dla mnie, stąd :

1. zainstalować gem 'jquery-turbolinks'

2. dodaj ten plik .coffee do swojej aplikacji: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. nazwij to turbolinks-compatibility.coffee

4. w application.js

   //= require jquery
   //= require jquery_ujs
   //= require jquery.turbolinks
   //= require turbolinks
   //= require turbolinks-compatibility
   

Podczas gdy czekamy na naprawę tego naprawdę fajnego klejnotu, mogłem przejść do przodu, modyfikując następujące elementy;

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

do:

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

Nie wiem jeszcze, czego to nie rozwiązuje, ale przy wstępnej inspekcji wydawało się, że działa dobrze.

Użyj lekkich klejnotów jquery-turbolinks .

Umożliwia $(document).ready()pracę z Turbolinks bez zmiany istniejącego kodu.

Alternatywnie możesz zmienić $(document).ready()na jedną z:

$(document).on('page:fetch', function() { /* your code here */ });

$(document).on('page:change', function() { /* your code here */ });

w zależności od tego, który jest bardziej odpowiedni w Twojej sytuacji.