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 */ });

в зависимости от того, какой из них более уместен в вашей ситуации.

чистый современный js:

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)