xengineer’s diary

結果、メモ的な内容になっています。

railsで、view毎に読み込むjsを変えたいんだよね

railsのasset pipelineはとっても便利なんだけど、開発も進んできて、

jsファイルが増えてくると、色々管理が大変になるのよね。

違うview同士で同じcssのclass使ってたりして、「あれー?なんか謎のjsが動いている、、、」

みたいなことになります。(なりました) どうすればいいのか、、、

単純な僕は、

require tree削除して、viewごとにlayout切って、必要なjsを読み込ませたりしました。

で、プルリだしたら、「content_for使えカス」と一蹴されたので、調べてみました。

すると、、、content_for便利ね!view内のyieldに、同じviewの中から任意文字列渡せるんだけど、

これがとても便利。

まぁ例でみるほうが早いので、以下でどうぞ。

まずは、asset pipelineで読み込まないjsを読み込むように設定しないといけない。(んだと思う)

config/initializers/assets.rbに下記記載。ファイルなければ作りましょう。

Rails.application.config.assets.precompile += %w( project.js ) 

app/view/layout/application.html.hamlに★の行を追記。

  1 !!!
  2 /
  3   This is a starter template page. Use this page to start your new project from
  4   scratch. This page gets rid of all links and provides the needed markup only.
  5 %html
  6   %head
  7     %meta{:charset => "UTF-8"}/
  8     %title Oniwa | Dashboard
  9     = include_gon
 10    = yield :javascript★
 11
 12    = stylesheet_link_tag    'application', media: 'all'
 13    = javascript_include_tag 'application'
 14    = csrf_meta_tags
 

描画時に、この★印のyieldのところに、javascript_include_tagが入るわけです。

で、↓↓↓の記述で、読み込むjsファイルを指定するわけです。

app/view/projects/show.html.hamlの(jsを読み込ませたいviewの)行末に下記を追記。

146
147 - content_for(:javascript) do
148   = javascript_include_tag 'project'

沢山読み込ませたいときは、続けて沢山かいて大丈夫。

これで、このviewで読み込まれるのは、app/asset/javascript/application.jsに書かれてるjsと、

content_forで書いてある、project.js(app/asset/javascript/project.js.coffeescript)になります。

いやはや便利。cssでも使えるよ。