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

「Rails way」でJSファイルを整理しようとしたときに、Rails 4アプリで問題が発生しました。以前は、さまざまなビューに散らばっていました。それらを別々のファイルに編成し、アセットパイプラインでコンパイルしました。ただし、ターボリンクがオンになっていると、jQueryの「準備完了」イベントが後続のクリックで起動しないことを知りました。初めてページをロードしたときに機能します。ただし、リンクをクリックすると、の内部はready( function($) {実行されません（ページが実際に再度読み込まれないため）。良い説明：ここ。

だから私の質問は：ターボリンクがオンのときにjQueryイベントが正しく機能することを保証する正しい方法は何ですか？スクリプトをRails固有のリスナーでラップしますか？それとも、レールには不必要な魔法があるのでしょうか？特にapplication.jsのようなマニフェストを介して複数のファイルをロードすることに関して、ドキュメントはこれがどのように機能するかについて少し曖昧です。

これが私がすることです... CoffeeScript：

ready = ->

  ...your coffeescript goes here...

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

最後の行は、ターボリンクがトリガーするページロードをリッスンします。

編集 ... JavaScriptバージョンの追加（リクエストごと）：

var ready;
ready = function() {

  ...your javascript goes here...

};

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

編集2 ...の場合、Rails 5（Turbolinks 5）page:loadはturbolinks:load初期ロード時に発生します。したがって、次のようにすることができます。

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

  ...your javascript goes here...

});

この問題を解決するための別のオプションを知りました。あなたがロードした場合宝石をそれがへのレールTurbolinksイベントをバインドしますあなたは、通常の方法であなたのjQueryを書くことができるようなイベント。あなただけの追加直後（デフォルト：JSマニフェストファイル内）。jquery-turbolinksdocument.readyjquery.turbolinksjqueryapplication.js

最近、私はそれを処理する最もクリーンで理解しやすい方法を見つけました：

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

または

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

EDIT
あなたがしている場合は委任イベントにバインドされたがdocument、あなたが外にそれらを添付してくださいreadyそうでない場合、彼らはすべての上でリバウンドを取得します、機能page:load（同じ機能が複数回実行させる）イベント。たとえば、次のような呼び出しがある場合：

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

次のreadyように、それらを関数から外します。

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

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

にバインドされた委任イベントは、イベントにバインドするdocument必要はありませんready。

これはRails 4のドキュメントで見つかりました。DemoZlukのソリューションに似ていますが、少し短いです：

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

または

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

を呼び出す外部スクリプトがある$(document).ready()場合、または既存のすべてのJavaScriptを書き換えるの$(document).ready()が面倒な場合は、このgemを使用してTurboLinksで引き続き使用できます：https : //github.com/kossnocorp/jquery.turbolinks

新しいレールガイドによると、正しい方法は次のとおりです。

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

または、coffeescript：

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

イベント$(document).readyをリッスンしないでください。イベントが1つだけ発生します。驚きはありません、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
})

turbolinks docから。

どちらかを使用

$(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');
});

これが2度実行されないようにするために私が行ったことです。

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

テストされた非常に多くのソリューションがついにこれに至りました。これだけ多くのコードが2回呼び出されることはありません。

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

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

私は通常、rails 4プロジェクトに対して次のことを行います。

に application.js

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

次に、残りの.jsファイルで、$(function (){})次の呼び出しを使用する代わりにonInit(function(){})

まず、jquery-turbolinksgemをインストールします。そして、あなたの体の端からご含まJavaScriptファイルを移動することを忘れないでくださいapplication.html.erbそのに<head>。

ここで説明しますが、速度最適化の理由からフッター内のアプリケーションのjavascriptのリンクを入れている場合、あなたはそれがタグ内のコンテンツの前にロードされるようにタグにそれを移動する必要があります。この解決策は私にとってうまくいきました。

私はのための機能を使用する場合、私の機能が倍増した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);
};

そうすることで、ターボリンクがサポートされている場合に関数が2倍になりません。