Рельсы 5: Как использовать $(документ).ready() с turbo-links

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

7 56
javascript ruby-on-rails jquery turbolinks ruby-on-rails-5

7 ответов:

вместо того, чтобы слушать ready событие, вам нужно подключиться к событию, запущенному Turbolinks для каждого посещения страницы.

к сожалению, Turbolinks 5 (которая является версией, которая появляется в Rails 5) была переписана и не использует те же имена событий, что и в предыдущих версиях Turbolinks, что приводит к сбою ответов, упомянутых выше. То, что работает сейчас, чтобы слушать turbolinks: load событие вот так:

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

нативный JS : 

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

Это мое решение, переопределить jQuery.fn.ready, потом $(document).ready работает без каких-либо изменений:

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

вот решение, которое работает для меня, от здесь:

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

  2. добавить .файл кофе для вашего приложения: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. назовите его turbolinks-совместимость.кофе

  4. в приложения.js

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

пока мы ждем исправления этого действительно классного драгоценного камня, я смог продвинуться вперед, изменив следующее;

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

to:

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

Я еще не знаю, что это не решает, но это, казалось, хорошо работает на первоначальном осмотре.

0

используйте легкий камень в jQuery-turbolinks.

здесь $(document).ready() работа с Turbolinks без изменения существующего кода.

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

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

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

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

-1

использовать: $(document).on 'turbolinks:load', ->

вместо: $(document).on('turbolinks:load', function() {...})

-1