ページごとに読み込むJsを制限したいなあと思って、ググってみたところいろいろ出てくる。
ただ、今回はできるかぎりシンプルにやりたかったのでjquery-readyselectorというJqueryプラグインを使うことにした。
このプラグインはBowerで管理されている(Node)モジュールみたいなので、まずはbower-railsをインストールして、
bower-rails経由でjquery-readyselectorをインストールすることにした。
bower-railsを使うには、事前にBowerをインストールしておく必要がある
bower-railsのインストール
まずはGemfileの設定し、インストール。
$ cat Gemfile
gem "bower-rails"
$ bundle install
次に、Nodeモジュールを管理するための設定ファイル(Gemfileみたいなもの)の形式を決める。
形式はjson形式のbower.jsonの場合か、
$ rails g bower_rails:initialize json
create bower.json
create config/initializers/bower_rails.rb
DSL形式のBowerfileのどちらか選べる。今回はこちらの方法を選択。
$ rails g bower_rails:initialize
create Bowerfile
create config/initializers/bower_rails.rb
bower-railsの設定はconfig/initializers/bower_rails.rbで行う。
今回は特に設定なし(デフォルトのまま)。
BowerRails.configure do |bower_rails|
# Tell bower-rails what path should be considered as root. Defaults to Dir.pwd
# bower_rails.root_path = Dir.pwd
# Invokes rake bower:install before precompilation. Defaults to false
# bower_rails.install_before_precompile = true
# Invokes rake bower:resolve before precompilation. Defaults to false
# bower_rails.resolve_before_precompile = true
# Invokes rake bower:clean before precompilation. Defaults to false
# bower_rails.clean_before_precompile = true
# Invokes rake bower:install:deployment instead rake bower:install. Defaults to false
# bower_rails.use_bower_install_deployment = true
end
jquery-readyselectorのインストール
まずはインストールするNodeモジュールを設定し、インストールの実行。
$ cat Bowerfile
asset 'jquery-readyselector'
$ bundle exec rake bower:install
するとvendor/assets配下にbower_componentsというディレクトリが生成され、
その中にNodeモジュールがインストールされる。
$ ll vendor/assets/bower_components/
query-readyselector/
...
bower-railsでインストールしたNodeモジュールは、bower-rails側で管理したかったので、gitignore した。
$ cat .gitignore
vendor/assets/bower_components/*
インストールしたNodeモジュールのpathを設定する。
$ cat config/application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
次にjquery-readyselectorをapplication.jsに読み込む。
$ cat app/assets/javascripts/application.js
//= require jquery-readyselector
//= require_tree .
最後にbodyタグに、アクセスされた時のコントローラ名とアクション名をclassに設定するようにする。
$ emacs app/views/layouts/application.html.erb
<body class="<%= controller_name -%> <%= action_name -%>">
ページ別にJsが読み込まれているか確認
まずは適当なページhttp://localhost:3000/booksを用意する。
$ rails g scaffold Book title:string price:integer
...
app/assets/javascripts/books.coffee
...
$ rake db:migrate
次に生成されたJs(coffee)に、ページ単位(action単位)にコードを書く。
http://localhost:3000/booksにアクセスした時のみ、alertがでれば成功。
$ emacs app/assets/javascripts/books.coffee
$('.books.index').ready ->
alert('book#index')