레일 5: $(문서) 사용 방법.터보 과급의 준비가 된

레일 5: $(문서) 사용 방법.터보 과급의 준비가 된

터보링크가 정상 작동을 방해합니다.$(document).ready()여기와 여기에서 논의된 바와 같이, 초기 로드 이외의 모든 페이지 방문에서 발생한 이벤트.그러나 연결된 답변의 솔루션 중 레일 5와 함께 작동하는 솔루션은 없습니다.이전 버전처럼 각 페이지 방문에서 코드를 실행하려면 어떻게 해야 합니까?

그 말을 듣는 것보다.ready이벤트, 당신은 페이지 방문 때마다 Turbolinks에 의해 실행된 이벤트에 연결해야 합니다.

안타깝게도 Turbolinks 5(Rails 5에 표시되는 버전)가 다시 작성되었으며 이전 버전의 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() {...})

순수 현대식 j:

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

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

터보와 함께turbo:load

여기에서 저에게 맞는 솔루션이 있습니다.

1. 설치하다gem 'jquery-turbolinks'

2. 앱에 이 .vmdk 파일을 추가합니다. https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. turbolinks-compatibility.dll 이름을 지정합니다.

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($)

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

경량 보석 장식 고리를 사용합니다.

그것은 만듭니다.$(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