Rails 4 アプリで、JS ファイルを「Rails 流」に整理しようとしたときに問題が発生しました。以前は、JS ファイルはさまざまなビューに分散していました。それらを別々のファイルに整理し、アセット パイプラインでコンパイルしました。しかし、ターボ リンクがオンになっていると、jQuery の「ready」イベントがその後のクリックで起動されないことがわかりました。ページを最初に読み込むときは機能します。しかし、リンクをクリックすると、その中の何もready( function($) {実行されません (ページが実際に再度読み込まれないため)。わかりやすい説明です。ここ。
そこで質問です。ターボリンクがオンのときに jQuery イベントが適切に動作することを保証する正しい方法は何ですか? Rails 固有のリスナーでスクリプトをラップしますか? それとも、Rails にはそれを不要にする魔法があるのでしょうか? ドキュメントでは、特に application.js などのマニフェストを介して複数のファイルをロードすることに関して、これがどのように動作するかが少し曖昧です。
ベストアンサー1
私がやっていることは次のとおりです... 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...
});