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

JS 파일을 "레일 방식"으로 구성하려고 할 때 Rails 4 앱에서 문제가 발생했습니다. 그들은 이전에 다른 견해에 흩어져있었습니다. 파일을 별도의 파일로 구성하고 자산 파이프 라인으로 컴파일했습니다. 그러나 터보 링크가 켜져있을 때 jQuery의 "준비"이벤트가 후속 클릭에서 발생하지 않는다는 것을 알게되었습니다. 페이지를 처음로드하면 작동합니다. 그러나 링크를 클릭 ready( function($) {하면 페이지가 실제로 다시로드되지 않기 때문에 내부의 어떤 것도 실행되지 않습니다. 좋은 설명 : here .

그래서 내 질문은 : 터보 링크가 켜져있는 동안 jQuery 이벤트가 올바르게 작동하도록하는 올바른 방법은 무엇입니까? Rails 전용 리스너에서 스크립트를 래핑합니까? 아니면 레일에 불필요하게 만드는 마법이 있습니까? 문서는 특히 application.js와 같은 매니페스트를 통해 여러 파일을로드하는 것과 관련하여 이것이 어떻게 작동하는지 조금 모호합니다.

여기 내가하는 일이 있습니다 : CoffeeScript :

ready = ->

  ...your coffeescript goes here...

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

마지막 줄은 터보 링크가 트리거 할 페이지로드를 청취합니다.

편집 ... 자바 스크립트 버전 추가 (요청 당) :

var ready;
ready = function() {

  ...your javascript goes here...

};

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

편집 2 ... 레일 5 (Turbolinks 5)의 경우는 page:load되고 turbolinks:load, 심지어 초기로드에 발사 될 것이다. 따라서 다음을 수행 할 수 있습니다.

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

  ...your javascript goes here...

});

나는이 문제를 해결하기위한 또 다른 옵션을 배웠다. gem 을로드 하면jquery-turbolinks Rails Turbolinks 이벤트를 이벤트에 바인딩 document.ready하여 일반적인 방식으로 jQuery를 작성할 수 있습니다. js manifest 파일 jquery.turbolinks바로 뒤에 추가 jquery하면됩니다 (기본 :) application.js.

최근에 가장 깨끗하고 이해하기 쉬운 방법을 찾았습니다.

$(document).on 'ready page:load', ->
  # Actions to do

또는

$(document).on('ready page:load', function () {
  // Actions to do
});

편집에 바인딩 된 이벤트를 위임 한
경우 함수 외부에 첨부해야 합니다. 그렇지 않으면 동일한 함수가 여러 번 실행되므로 모든 이벤트에서 리바운드됩니다 . 예를 들어 다음과 같은 호출이있는 경우 :documentreadypage:load

$(document).on 'ready page:load', ->
  ...
  $(document).on 'click', '.button', ->
    ...
  ...

다음 ready과 같이 기능에서 꺼내십시오 .

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

$(document).on 'click', '.button', ->
  ...

에 바인딩 된 위임 된 이벤트는 이벤트에 바인딩 document될 필요가 없습니다 ready.

이 발견 레일 4 문서 DemoZluk의 솔루션과 유사하지만 약간 짧은을 :

$(document).on 'page:change', ->
  # Actions to do

또는

$(document).on('page:change', function () {
  // Actions to do
});

호출하는 외부 스크립트가 $(document).ready()있거나 기존 JavaScript를 모두 다시 작성할 필요가없는 경우이 gem을 사용하면 $(document).ready()TurboLinks 를 계속 사용할 수 있습니다 . https://github.com/kossnocorp/jquery.turbolinks

새로운 레일 가이드 에 따라 올바른 방법은 다음을 수행하는 것입니다.

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

또는 커피 스크립트에서 :

$(document).on "turbolinks:load", ->
alert "page has loaded!"

이벤트를 듣지 마십시오 $(document).ready. 하나의 이벤트 만 시작됩니다. 당연히 jquery.turbolinks gem 을 사용할 필요가 없습니다 .

이것은 레일 5 이상이 아니라 레일 4.2 이상에서 작동합니다.

참고 : 깨끗하고 내장 된 솔루션은 @SDP의 답변을 참조하십시오

다음과 같이 수정했습니다.

다음과 같이 포함 순서를 변경하여 다른 앱 종속 js 파일이 포함되기 전에 application.js를 포함시켜야합니다.

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

바인딩을 처리하는 전역 함수를 정의하십시오. application.js

// application.js
window.onLoad = function(callback) {
  // binds ready event and turbolink page:load event
  $(document).ready(callback);
  $(document).on('page:load',callback);
};

이제 다음과 같은 것을 묶을 수 있습니다.

// in coffee script:
onLoad ->
  $('a.clickable').click => 
    alert('link clicked!');

// equivalent in javascript:
onLoad(function() {
  $('a.clickable').click(function() {
    alert('link clicked');
});

위의 어느 것도 나를 위해 작동하지 않습니다 .jQuery의 $ (document) .ready를 사용하지 않고이 문제를 해결했지만 대신 addEventListener를 사용하십시오.

document.addEventListener("turbolinks:load", function() {
  // do something
});

$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'

다음을 사용해야합니다.

document.addEventListener("turbolinks:load", function() {
  // your code here
})

터보 링크 문서에서 .

또는

$(document).on "page:load", attachRatingHandler

또는 jQuery의 .on 함수를 사용하여 동일한 효과를 얻습니다.

$(document).on 'click', 'span.star', attachRatingHandler

자세한 내용은 여기를 참조하십시오 : http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

변수를 사용하여 "준비"기능을 저장하고 이벤트에 바인딩하는 대신 트리거 ready될 때마다 이벤트 를 트리거 할 수 있습니다 page:load.

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

작업이 두 번 실행되지 않도록하기 위해 수행 한 작업은 다음과 같습니다.

$(document).on("page:change", function() {
     // ... init things, just do not bind events ...
     $(document).off("page:change");
});

나는 jquery-turbolinks 보석을 사용하거나 결합 $(document).ready하고 $(document).on("page:load")사용 $(document).on("page:change")하는 것 자체가 예기치 않게 행동 특히 개발중인 경우.

나는 나에게 잘 맞는 다음 기사 를 발견하고 다음 사용법을 자세히 설명합니다.

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)

Turbolinks 5로 업그레이드하는 사람들을 위해 여기에 남겨 두겠다고 생각했습니다 . 코드를 수정하는 가장 쉬운 방법은 다음과 같습니다.

var ready;
ready = function() {
  // Your JS here
}
$(document).ready(ready);
$(document).on('page:load', ready)

에:

var ready;
ready = function() {
  // Your JS here
}
$(document).on('turbolinks:load', ready);

참조 : https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346

$(document).ready(ready)  

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

많은 솔루션이 마침내 이것에 도달했습니다. 이 많은 코드는 확실히 두 번 호출되지 않습니다.

      var has_loaded=false;
      var ready = function() {
        if(!has_loaded){
          has_loaded=true;
           
          // YOURJS here
        }
      }

      $(document).ready(ready);
      $(document).bind('page:change', ready);

나는 보통 레일 4 프로젝트에 대해 다음을 수행합니다.

에 application.js

function onInit(callback){
    $(document).ready(callback);
    $(document).on('page:load', callback);
}

그런 다음 나머지 .js 파일에서 $(function (){})전화 를 사용하는 대신onInit(function(){})

먼저 jquery-turbolinksgem을 설치하십시오 . 그리고, 당신의 몸의 끝에서 포함 된 자바 스크립트 파일을 이동하는 것을 잊지 마세요 application.html.erb그것으로 <head>.

으로 여기에 설명 이 속도 최적화 이유로 바닥 글에서 응용 프로그램의 자바 스크립트 링크를 넣어 경우, 당신은 너무 태그로 이동해야합니다 그것이로드 태그의 콘텐츠 전에. 이 솔루션은 저에게 효과적이었습니다.

내가하는 기능을 사용할 때 제 기능을 두 배로 발견 ready하고 turbolinks:load, 내가 사용하므로

var ready = function() {
  // you code goes here
}

if (Turbolinks.supported == false) {
  $(document).on('ready', ready);
};
if (Turbolinks.supported == true) {
  $(document).on('turbolinks:load', ready);
};

그렇게하면 터보 링크가 지원되는 경우 함수가 두 배가되지 않습니다!