[RUBY-ON-RAILS] 5 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법

5 레일 : 터보 링크 .ready $ (문서) ()를 사용하는 방법

Turbolinks의 방지는 보통 $ (문서) 초기로드 이외의 모든 페이지 방문 발사에서 .ready () 이벤트, 여기와 여기에 논의한다. 링크 된 답변에서 솔루션의 아무도는하지만, 레일 (5)와 함께 작동하지 않습니다. 어떻게 이전 버전처럼 각 페이지 방문에 코드를 실행할 수 있습니까?

해결법

1. ==============================

   1.준비 이벤트를 수신하는 대신, 당신은 이벤트가 모든 페이지에 방문 Turbolinks에 의해 해고에 연결해야합니다.

   준비 이벤트를 수신하는 대신, 당신은 이벤트가 모든 페이지에 방문 Turbolinks에 의해 해고에 연결해야합니다.

   불행하게도,있다 (레일 5에 표시가있는 버전) Turbolinks 5 재 작성하고, 답변에 오류가 언급 한 원인이 Turbolinks의 이전 버전에서와 동일한 이벤트 이름을 사용하지 않습니다. 이제 어떻게 작동하면 turbolinks을들을 수 있습니다 :로드 이벤트과 같이 :

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

2. ==============================

   2.기본 JS :

   기본 JS :

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

3. ==============================

   3.이것은 내 솔루션, 재정 jQuery.fn.ready, 다음 $ (문서) 변경없이 .ready 작품입니다 :

   이것은 내 솔루션, 재정 jQuery.fn.ready, 다음 $ (문서) 변경없이 .ready 작품입니다 :

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

4. ==============================

   4.레일 5에서 가장 쉬운 솔루션을 사용하는 것입니다 :

   레일 5에서 가장 쉬운 솔루션을 사용하는 것입니다 :

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

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

5. ==============================

   5.여기에 해결책은 여기에서 나를 위해 그 일이다 :

   여기에 해결책은 여기에서 나를 위해 그 일이다 :

6. ==============================

   6.우리가 정말 멋진 보석에 대한 수정을 기다리는 동안, 나는 다음을 수정하여 전진 할 수 있었다;

   우리가 정말 멋진 보석에 대한 수정을 기다리는 동안, 나는 다음을 수정하여 전진 할 수 있었다;

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

   에:

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

   난 아직이 해결하지 무엇인지 모르겠지만, 초기 검사에서 잘 작동하는 것 같았다.

7. ==============================

   7.(커피 스크립트 용)

   (커피 스크립트 용)

   나는 사용한다:  $ (문서) CSTE 연구진은 'turbolinks :로드'->

   대신에:  $ (문서) CSTE 연구진 ( 'turbolinks :로드', 기능 () {...})

8. ==============================

   8.경량 보석 JQuery와 - turbolinks를 사용합니다.

   경량 보석 JQuery와 - turbolinks를 사용합니다.

   그것은 $ (문서) 기존 코드를 변경하지 않고 Turbolinks와 .ready () 작업을합니다.

   양자 택일로, 당신은 () 중 하나에 .ready $ (문서)를 변경할 수 있습니다 :

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

   에 따라 하나가 현재 상황에서 더 적합하다.

from https://stackoverflow.com/questions/36110789/rails-5-how-to-use-document-ready-with-turbo-links by cc-by-sa and MIT license