turbolinks

ブラウジング高速化のためのgem。
HTMLロード→CSS, JavaScriptロード→レンダリング
の流れの中で中間部分を飛ばす手法。

具体的には初回ロード時には附帯情報を取得するが、以降のページ遷移では附帯情報を保持したままでHTML情報のみを取得する。

ここで問題となるのはページ読み込みを起点としたJavaScriptが動かなくなること。

$(function() {
    #処理
});

で始まるjQueryは全てページ読み込み完了を起点に動くようになっているので、turbolinksが有効だと動かなくなります。正確には初回アクセスのページでは動作しますが、リンクを踏んで移動すると機能しなくなります。
ロードしてしまえば動くので、F5リロードで再び動作するようになります。

解決法

1.gem自体を削除する (非推奨)

gemfileからturbolinksを削除。

app/assets/javascripts/application.js から「//= require turbolinks」を削除する。

views/layouts/application.html.erb or hamlから以下の’data-turbolinks-track’: ‘reload’の記述を削除

= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

2. JSファイルの記述を変更する。 (推奨)

jQueryなら$(function(){}で始まる記述を以下へ変更する。

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

JavaScriptなら以下のように変更する。

document.addEventListener("turbolinks:load", function() {
  // ...
})
【Ruby on Rails】Turbolinksについてご意見お聞かせ下さい|teratail
Ruby on Railsまだ2か月程度の者です。 「Turbolinks」のおかげで、jQueryが時折意図した動きをせず。。。 度々悩まされております。 Turbolinksの目的はおおよそ分かりました。 現在、作成中のアプリが多様なjs, cssを使用しない

turbolinksで発火が持続する

$(document).on('turbolinks:load', function() {
  var pattern = new RegExp("groups/\\d\\d/messages")
  if(document.URL.match(pattern)) {
    setInterval(reloadMessages, 5000);
  }
}

turbolinksでページ遷移時にjavaが無効になるのを回避した。
が、url.matchが機能しなくなった。
厳密には初回アクセス、リロード時には動作するのだが、条件外のページ遷移時にif文が評価されない感じ。(評価しているけどtrueなのかもしれないが)

コメント