jQuery の `$(document).ready()` を Rails 4 の Turbo Links で動作させるにはどうすればよいですか?

Rails 4: Turbo-Links 統合による jQuery の '$(document).ready()' の利用

Rails 4 での作業中アプリケーションでは、開発者は JavaScript ファイルを効果的に整理する必要に遭遇することがよくあります。従来、JavaScript コードはさまざまなビューに分散していました。ただし、より組織化されたアプローチには、それらを個別のファイルにコンパイルし、アセット パイプラインを利用することが含まれます。

ただし、Turbo-Links が有効になっている場合、jQuery の「ready」イベントは制限に遭遇します。後続のクリック中に、「準備完了」イベントの発生が停止し、そのスコープ内のコードの実行に影響します。この問題は、Turbo-Links が有効になっているとページがリロードされないために発生します。

これを解決するには、Turbo-Links がアクティブなままである間、jQuery イベントが問題なく機能することを確認することが重要です。 2 つのアプローチが考えられます。

アプローチ 1: Rails 固有のリスナーによるイベント ラッピング

この方法には、Rails 固有のリスナー内で JavaScript スクリプトをラップすることが含まれ、効果的にページの読み込み時に実行されます。

アプローチ 2: ターボリンクの利用イベント

Turbo-Links は、必要な JavaScript コードをトリガーするために使用できる特定のイベント「page:load」を提供します。このイベントを利用することで、開発者は後続のクリックによって発生する問題を回避できます。

CoffeeScript ユーザーの場合、次のコード スニペットが解決策を提供します。

ready = ->

  ...your coffeescript goes here...

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

このスニペットの最後の行は次のメッセージをリッスンします。 Turbo-Links がトリガーする「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-Links の存在にもかかわらず jQuery イベントが正しく機能し続けることを効果的に保証できます。

以上がjQuery の `$(document).ready()` を Rails 4 の Turbo Links で動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。