hello-world
webエンジニアのメモ。とりあえずやってみる。

[rails]bodyにclassを付けて特定のページでのみjsが動作するようにする

公開日時

Asset Pipelineを使用するとjsやcssを結合してくれます。

結合によって高速化できますが、app/assets/javascripts以下のjsが一括で読み込まれてしまうため、js側でページによって機能を切り替える必要があります。

例えばsample-a.jsで

$(function() {
  $('p').css('color', 'red');
});

と書いてsample-b.jsで

$(function() {
  $('p').css('color', 'blue');
});

と書いた場合、全ページのp要素の色がblueになってしまいます。

(sample-b.jsがあとで読み込まれてsample-a.jsのcss変更を上書き)

そこで、 jquery-readyselector を使ってみます。

jquery.readyselector.jsをダウンロードし、vendor/assets/javascripts以下に設置します。

application.jsにrequire jquery.readyselectorを追加。

# app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.readyselector
//= require_tree .-

layouts/application.html.erbのbodyタグのclassにコントローラ名とアクション名をつけるように変更。

# app/views/layouts/application.html.erb

<body class="<%= controller_name -%> <%= action_name -%>">

これで各ページ用のjsに$('.コントローラ名.アクション名').readyを記述すればページごとに機能を切り替えることができます。

# app/assets/javascripts/home.js.coffee

# js
$('.home.index').ready(function () {
  console.log('home#index');
});

# coffee
$('.home.index').ready ->
  console.log 'home#index'

参考


Related #Rails

[rails]ELB使用時にヘルスチェック用のアクションを作成する

ELBにrailsアプリをぶら下げる場合、railsアプリが落ちたらELBから外れてもらいたいです。

[rails]carrierwaveで保存した画像のurlを取得する

carrierwave 0.10.0 で確認 imageカラムにcarrierwaveで保存した画像を保存している場合、デフォルトのままだとだとurlメソッドを実行してもpublic以下のパスのみで http://~ が設定されていません。