Rails Turbolinksをページ毎に無効化する方法

7839 ワード
JavaScript # Rails5 JavaScript テキストリンク

Turbolinksをページ毎に無効化する技を学ぶ

そもそもTurobolinksとは？

Turbolinksはリンクを生成する要素であるa要素のクリックをフックにして、
移動した先のページをAjaxで取得します。

その後、取得ページのデータが遷移前のページと同じものがあれば再利用し、
title・body要素を置き換えて表示します。
データを再利用するので、アプリケーションの速度向上などのパフォーマンスの向上を
させることができます。

公式ページ

しかし　jqueryと競合することが多く、ページによってはオフにしたい！

考えられる方法は次の3通り

1,Turbolinksを全削除する

2,gem jquery-turbolinksを使用する（Rails４）または素直にturbolinksで記述する

3,Turbolinksを部分的にオフにする

1,全削除

とりあえず全部消す（あんまオススメではありません)

*turbolinksは付き合い方によってはとってもイイ奴です。

gemファイルからturbolinksの項目を削除

Gemfile
# 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

app/assets/javascripts/application.js
//= require jquery 

//= require jquery_ujs 
//= require turbolinks ←　ここを削除
//= require owl.carousel 

//= require_tree .

layoutのapplication.html.haml

app/views/layouts/application.html.haml
= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'

 'data-turbolinks-track': 'reload'の記述を削除

turbolinksの記述をとにかく削除すればOK

2,turbolinksで素直に記述する（まずはここで向き合うべき)

javascript

app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on('turbolinks:load', function() { });

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on('turbolinks:render', function() {　});

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on('turbolinks:request-start', function() {　});avascripts/script.js

coffeeの場合

app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(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タグ内の記述を変更する

app/views/layouts/application.html.haml
%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

オススメは２番でゴリゴリ記述していきたいところですがうまく行かない場合、３番ですかね〜

では今回はこのくらいで。