Rails 5: як використовувати $ (document) .ready () з турбо-посиланнями

Turbolinks запобігає $(document).ready()запуску звичайних подій під час усіх відвідувань сторінки, крім початкового завантаження, як обговорюється тут і тут . Однак жодне з рішень у зв’язаних відповідях не працює з Rails 5. Як я можу запускати код при кожному відвідуванні сторінки, як у попередніх версіях?

Замість того, щоб слухати readyподію, вам потрібно підключитись до події, яку запускає Turbolinks за кожне відвідування сторінки.

На жаль, Turbolinks 5 (це версія, яка з’являється в Rails 5) була переписана і не використовує тих самих назв подій, що й у попередніх версіях Turbolinks, через що згадані відповіді не вдаються. Зараз працює прослуховування події turbolinks: load так:

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

Рідний JS:

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

У рейках 5 найпростішим рішенням є використання:

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

Замість $(document).ready. Працює як шарм.

Це моє рішення, замінити jQuery.fn.ready, тоді $(document).readyпрацює без змін:

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

(Для кавового сценарію)

Я використовую: $(document).on 'turbolinks:load', ->

Замість: $(document).on('turbolinks:load', function() {...})

Ось рішення, яке мені підходить, звідси :

1. встановити gem 'jquery-turbolinks'

2. додайте цей файл .coffee у свій додаток: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. назвіть це turbolinks-compatibility.coffee

4. на application.js

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

Поки ми чекаємо виправлення цієї справді крутої перлини, я зміг рухатися вперед, змінивши наступне;

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

до:

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

Я ще не знаю, що це не вирішує, але, здавалося, це добре працювало під час первинної перевірки.

Використовуйте легкий самоцвіт jquery-turbolinks .

Це робить $(document).ready()роботу з Turbolinks без зміни існуючого коду.

Крім того, ви можете змінити $(document).ready()один із:

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

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

залежно від того, який з них більше підходить у вашій ситуації.