Rails 5 : 터보 링크와 함께 $ (document) .ready ()를 사용하는 방법

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!');
});

---

Rails 5에서 가장 쉬운 솔루션은 다음을 사용하는 것입니다.

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

대신 $(document).ready. 매력처럼 작동합니다.

---

이것은 내 솔루션이며 재정 jQuery.fn.ready의 한 다음 $(document).ready변경하지 않고 작동합니다.

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

---

여기에서 나를 위해 작동하는 솔루션이 있습니다 .

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
   

---

이 멋진 gem의 수정을 기다리는 동안 다음을 수정하여 앞으로 나아갈 수있었습니다.

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

에:

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

나는 이것이 해결되지 않는 것을 아직 알지 못하지만 초기 검사에서 잘 작동하는 것 같습니다.

---

(커피 스크립트 용)

나는 사용한다: $(document).on 'turbolinks:load', ->

대신에: $(document).on('turbolinks:load', function() {...})

---

경량 gem jquery-turbolinks를 사용하십시오 .

그것은 만드는 $(document).ready()기존 코드를 변경하지 않고 Turbolinks와 함께 일을.

또는 다음 $(document).ready()중 하나로 변경할 수 있습니다 .

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

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

상황에 어느 것이 더 적합한 지에 따라 다릅니다.

참고 URL : https://stackoverflow.com/questions/36110789/rails-5-how-to-use-document-ready-with-turbo-links