初めに
javascriptってすべてのページで同じファイルを読み込まれてると都合悪いですよね。
エラーとか出てしまうし。
なのでいままではerb内の最後にjavascriptを書いていたのですが他の方法が分かったので書きます。
ちなみにこの記事のまんまですが読み込みのところで一か所うまくいかなかったところがありました。
[rails] 特定のページのみで実行するJavascript
https://www.ohmyenter.com/execute-javascript-on-a-page-on-rails/
実装
まずassets/javascript内にon_page_load.coffeeを作成します。
その中に
この記事に書いてあるコードをコピペします。
この記事ではcoffeeで書いてあります。
またjqueryが必要なのでjqueryを使えるようにしておきます。
あとはapplication.html.erbでbodyを
<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">
こんな感じにします。
基本的にこれで
onPageLoad('users#index', function() {
});
こんな感じで使えるようになります。
これならusersコントローラーのindexアクションで使うjavascriptっていう感じ
ですが自分の場合うまくいかず....
読み込むときにon_page_load.coffeeはrequireで読み込むようにしました。
//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require on_page_load
//= require users
//= require books
こんな感じに
requireでon_page_loadを読み込んでいるので
require_tree . でまた同じファイルが読み込まれちゃうんじゃないかと思ってrequire_treeを削除して
ファイルを指定して読み込んでいます。
めでたしめでたし
cssのコントローラー別読み込み
cssの場合まず
application.html.erbのbodyを
<body class='<%= controller_name %>'>
こうします
そして
scssファイルで
.users
{
background: red;
.title
{
color: white;
}
}
.books
{
background: blue;
.title
{
color: black;
}
}
とすればコントローラーごとにcssをかえることができます。
おわり