いつもお世話になっております。
画面遷移時jsが読み込まれないことを下記の実装で回避しました。
しかし、これがrailsらしい書き方なのかわかりません
現在の実装がrailsらしい実装の仕方なのか
turbolinksの恩恵を受けているのか、教えていただけませんでしょうか。
よろしくお願いいたします。
現在の実装
-
jsを二つに分け、片方をヘッダーで読み込み、片方をbodyの最後で読み込む。
-
該当ページ以外でもjsが読み込まれてしまう。
-
application.js
lang
1//= require rails-ujs
- app.js
lang
1//= require jquery/jquery.slim.min 2//= require bootstrap/bootstrap.min 3//= require user //自分で書いたjs 4//= require turbolinks
- user.js
lang
1console.log("hoge"); 2
- application.html.slim
lang
1doctype html 2html lang="ja" 3 head 4 meta charset="utf-8" / 5 title 6 | sample 7 = csrf_meta_tags 8 = stylesheet_link_tag 'application' 9 = javascript_include_tag 'application' 10 body 11 = yield 12 = javascript_include_tag 'app' 13
過程
1. jsをヘッダーで読み込み、'turbolinks:load'を付与
-
画面遷移をするとjsが読み込まれない
-
application.js
lang
1//= require rails-ujs 2//= require jquery/jquery.slim.min 3//= require bootstrap/bootstrap.min 4//= require user //自分で書いたjs 5//= require turbolinks
- user.js
lang
1document.addEventListener("turbolinks:load", function() { 2 console.log("hoge"); 3})
- application.html.slim
application.html.slim
1doctype html 2html lang="ja" 3 head 4 meta charset="utf-8" / 5 title 6 | sample 7 = csrf_meta_tags 8 = stylesheet_link_tag 'application' 9 = javascript_include_tag 'application' 10 body 11 = yield
2. jsの読み込み位置をbodyの最後に持ってくる
- 画面遷移してもjsを読み込んでくれる
Uncaught Error: rails-ujs has already been loaded!
が発生
application.html.slim
1 body 2 = yield 3 = javascript_include_tag 'application' 4
3. rails-ujs has already been loaded!を解消
- jsの読み込み位置はbodyの最後
- ページ遷移するとjsが読み込まれない問題が再発
= javascript_include_tag 'application', 'data-turbolinks-eval': false
- 参考url
4. jsを使うページへのlink_to
にdata: {turbolinks: false}
を付与
- jsの読み込み位置はbodyの最後
- 画面遷移時jsを読み込んでくれる
- 設定していないページには
rails-ujs has already been loaded!
が発生している
5. ライブラリをヘッダー、自前のをbodyで読み込む
-
jqueryが動かない
-
application.js
lang
1//= require rails-ujs 2//= require jquery/jquery.slim.min 3//= require bootstrap/bootstrap.min 4//= require turbolinks
- app.js
lang
1//= require user //自分で書いたjs
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。