Rails 5：ターボリンクで$（document）.ready（）を使用する方法

Turbolinksは$(document).ready()、こことここで説明されているように、初期ロード以外のすべてのページ訪問で通常のイベントが発生するのを防ぎます。ただし、リンクされた回答のソリューションはいずれもRails5では機能しません。以前のバージョンのように、各ページアクセスでコードを実行するにはどうすればよいですか？

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

（コーヒースクリプト用）

私が使う： $(document).on 'turbolinks:load', ->

の代わりに： $(document).on('turbolinks:load', function() {...})

ここから、私のために働く解決策があります：

1. インストール gem 'jquery-turbolinks'

2. この.coffeeファイルをアプリに追加します：https：//github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. ターボリンクと名付けます-compatibility.coffee

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

これが何を解決しないのかはまだわかりませんが、初期検査ではうまく機能しているようです。

軽量のgemjquery-turbolinksを使用します。

それは作る$(document).ready()既存のコードを変更することなく、Turbolinksで仕事を。

または、次の$(document).ready()いずれかに変更することもできます。

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

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

あなたの状況でどちらがより適切であるかに応じて。