jQuery의 `$(document).ready()`를 Rails 4의 Turbo Link와 함께 작동하게 만드는 방법은 무엇입니까?

Rails 4: Turbo-Links 통합으로 jQuery의 '$(document).ready()' 활용

Rails 4에서 작업하는 동안 애플리케이션을 사용하면서 개발자는 JavaScript 파일을 효과적으로 구성해야 하는 경우가 많습니다. 전통적으로 JavaScript 코드는 다양한 보기에 분산되어 있었습니다. 그러나 보다 체계적인 접근 방식에는 이를 별도의 파일로 컴파일하고 자산 파이프라인을 활용하는 것이 포함됩니다.

그러나 Turbo-Links가 활성화되면 jQuery "ready" 이벤트에 제한이 발생합니다. 후속 클릭 중에는 "ready" 이벤트가 더 이상 실행되지 않으며 해당 범위 내 코드 실행에 영향을 줍니다. 이 문제는 터보 링크가 활성화된 상태에서 페이지가 다시 로드되지 않기 때문에 발생합니다.

이 문제를 해결하려면 터보 링크가 활성화된 동안 jQuery 이벤트가 완벽하게 작동하는지 확인하는 것이 중요합니다. 두 가지 접근 방식을 고려할 수 있습니다.

접근 방법 1: Rails 관련 리스너를 사용한 이벤트 래핑

이 방법에는 Rails 관련 리스너 내에서 JavaScript 스크립트를 래핑하여 이벤트를 효과적으로 보장합니다. 페이지 로드 시 실행

접근 방법 2: 터보 링크 활용 이벤트

Turbo-Links는 필요한 JavaScript 코드를 실행하는 데 사용할 수 있는 특정 이벤트 "page:load"를 제공합니다. 이 이벤트를 활용하면 개발자는 후속 클릭으로 인해 발생하는 문제를 우회할 수 있습니다.

CoffeeScript 사용자의 경우 다음 코드 조각이 솔루션을 제공합니다.

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

이 조각의 마지막 줄은 터보 링크가 트리거하는 "page:load" 이벤트.

JavaScript 사용자의 경우 다음과 같은 상응하는 코드를 사용할 수 있습니다. 채용:

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Rails 5에서는 업데이트된 Turbolinks 5를 사용하여 "page:load" 이벤트가 "turbolinks:load"로 대체되었으며 이는 초기 페이지 로드 시에도 트리거됩니다. 이는 다음과 같이 코드를 단순화합니다.

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

  ...your javascript goes here...

});

이러한 솔루션을 구현함으로써 개발자는 Turbo-Link가 있어도 jQuery 이벤트가 계속 올바르게 작동하도록 효과적으로 보장할 수 있습니다.

위 내용은 jQuery의 `$(document).ready()`를 Rails 4의 Turbo Link와 함께 작동하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!