1
0

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

RailsでECサイトを作成中に、一部ボタンが動作しないことがあり、turbolinksを一部無効化することで解決しました。
そもそもturbolinksとは何ぞや状態だったので、備忘録として残しておきます。

#turbolinksとは
ページ遷移をAjaxに置き換えることで、JavaScriptやCSSのパースを省略することで高速化するgemのこと。
Railsにデフォルトで入っているやつ。

#完全にturbolinksを無効化する方法
※ turbolinksを完全無効化すると、他の高速化するgemを入れたりする必要があるので、
私のような初心者は、特別なことがない限りおすすめしないです。
###1. gemを無効化する

Gemfile
    #コメントアウトをする
    #gem 'turbolinks'
ターミナル
    $ bundle update

###2. application.jsを編集

application.js
    // 変更前
    //= require turbolinks 

    // 変更後
    // require turbolinks 

###3. application.html.slimを編集

application.html.slim
    / 変更前
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    
    / 変更後
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'

#一部を無効化する方法
###1. JavaScriptを編集する方法

・.jsファイルの場合

hoge.js
    $(document).on('turbolinks:load', function() {
     // turbolinksを無効化したい処理を入れる
    });

・.coffeeファイルの場合

hoge.coffee
    $(document).on 'turbolinks:load', -> 
      # turbolinksを無効化したい処理

###2. リンクを編集する方法
・link_toに追加する場合

hoge.html.slim
    = link_to '', root_path, 'data-turbolinks': false

'data-turbolinks': false をlink_toに追加すれば無効化できます。

・divの場合

hoge.html.slim
    div data-turbolinks='false'
      = link_to '', root_path
1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?