Turbolinksをページ毎に無効化する技を学ぶ
そもそもTurobolinksとは?
Turbolinksはリンクを生成する要素であるa要素のクリックをフックにして、
移動した先のページをAjaxで取得します。
その後、取得ページのデータが遷移前のページと同じものがあれば再利用し、
title・body要素を置き換えて表示します。
データを再利用するので、アプリケーションの速度向上などのパフォーマンスの向上を
させることができます。
しかし jqueryと競合することが多く、ページによってはオフにしたい!
考えられる方法は次の3通り
1,Turbolinksを全削除する
2,gem jquery-turbolinksを使用する(Rails4)または素直にturbolinksで記述する
3,Turbolinksを部分的にオフにする
1,全削除
#とりあえず全部消す(あんまオススメではありません)
*turbolinksは付き合い方によってはとってもイイ奴です。
gemファイルからturbolinksの項目を削除
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5' ← ここをコメントアウト
# gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks ← ここを削除
//= require owl.carousel
//= require_tree .
layoutのapplication.html.haml
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
'data-turbolinks-track': 'reload'の記述を削除
turbolinksの記述をとにかく削除すればOK
2,turbolinksで素直に記述する(まずはここで向き合うべき)
javascript
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on('turbolinks:load', function() { });
//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on('turbolinks:render', function() { });
//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on('turbolinks:request-start', function() { });avascripts/script.js
coffeeの場合
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on 'turbolinks:load', ->
//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on 'turbolinks:render', ->
//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on 'turbolinks:request-start', ->
Rails5以上であれば とりあえず'turbolinks:load'としておく。gem jquery-turbolinksの読み込みも必要なし!
3,部分的にオフにする(ページ毎)
views/layouts/application.html.hamlの%bodyタグ内の記述を変更する
%body
- if content_for?(:body_attributes)
= yield(:body_attributes)
turbolinksをオフにしたいビューページに以下を追記する
- content_for(:body_attributes) do
data-turbolinks="false"
リンク先をturbolinksオフにしたい場合
%div{"data-turbolinks" => "false"}でリンクタグを囲う
%div{"data-turbolinks" => "false"}
= link_to "Home", root_path
またはlink_toの属性に追加する
=link_to new_user_registration_path, class: "btn-def--mail","data-turbolinks": false do
オススメは2番でゴリゴリ記述していきたいところですがうまく行かない場合、3番ですかね〜
では今回はこのくらいで。