33
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

そもそもTurobolinksとは?

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

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

公式ページ

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

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

1,Turbolinksを全削除する

2,gem jquery-turbolinksを使用する(Rails4)または素直に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

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

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

33
42
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
42

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?