428

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

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

4

19 に答える 19

560

これが私がしていることです... 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...

});
于 2013-09-12T17:21:20.170 に答える
236

この問題を解決するための別のオプションを知りました。gemをロードするjquery-turbolinksと、Rails Turbolinks イベントがイベントにバインドされるdocument.readyため、通常の方法で jQuery を記述できます。jquery.turbolinksjs マニフェスト ファイルの直後に追加するだけjqueryです (デフォルト: application.js)。

于 2013-09-16T17:49:38.113 に答える
81

新しいrails guidesによると、正しい方法は次のとおりです。

$(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を使用する必要はありません。

これは、Rails 5 だけでなく、Rails 4.2 以降でも機能します。

于 2016-07-19T11:59:21.850 に答える
10

注: クリーンな組み込みソリューションについては、@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');
});
于 2013-10-28T15:20:39.913 に答える
9

上記のどれもうまくいきません。jQuery の $(document).ready を使用せずに、代わりに addEventListener を使用して解決しました。

document.addEventListener("turbolinks:load", function() {
  // do something
});
于 2016-09-13T12:05:45.043 に答える
7 
$(document).on 'ready turbolinks:load', ->
  console.log '(document).turbolinks:load'
于 2017-08-28T10:14:29.323 に答える
3

どちらかを使用します

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

于 2013-09-12T17:50:47.927 に答える
2

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

于 2016-07-01T03:13:13.397 に答える
2

私は次の記事を見つけました。

var load_this_javascript = function() { 
  // do some things 
}
$(document).ready(load_this_javascript)
$(window).bind('page:change', load_this_javascript)
于 2015-10-21T14:54:02.520 に答える
2 
$(document).ready(ready)  

$(document).on('turbolinks:load', ready)
于 2016-10-05T11:51:12.050 に答える
2

変数を使用して「準備完了」関数を保存し、それをイベントにバインドする代わりに、 がトリガーさreadyれるたびにイベントをトリガーしたい場合がありpage:loadます。

$(document).on('page:load', function() {
  $(document).trigger('ready');
});
于 2014-11-25T18:45:25.763 に答える
1

非常に多くのソリューションをテストして、最終的にこれに到達しました。これだけ多くのコードが 2 回呼び出されることはありません。

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

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

于 2016-07-01T10:04:14.350 に答える
0

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

こちら で説明されているように、速度を最適化するためにアプリケーションの JavaScript リンクをフッターに配置した場合は、タグ内のコンテンツの前に読み込まれるようにタグ内に移動する必要があります。この解決策は私にとってはうまくいきました。

于 2016-06-21T09:58:11.410 に答える