RailsアプリケーションとJavascriptの連携をしたい場合、gonというgemがあります。これを使うとcontroller内でセットした変数をJavascript(rails3以上だとcoffeescriptを使うケースが殆どだと思いますが）内で使う事ができます。
設定
Gemfileにまずは追記します。
Gemfile
gem 'gon'
で書いたらbundle installを実行
bundle install
次にapp/views/layouts/application.html.erbに以下を追記します。
app/views/layouts/application.html.erb
・・・・・
<%= include_gon %>
<%= javascript_include_tag "application" %>
・・・・・・・
使ってみる
controllerに内で変数をJavascript(coffeescript)内で使ってみましょう。
app/controllers/users_controller.rb
def index
gon.user_name = 'テスト太郎'
end
で、Javascriptのソースです。今回はcoffeescriptを使います。
app/assets/javascripts/users.js.coffee
$ ->
$("div#movie_list").click (e) ->
alert(gon.user_name)
これでusersのindexメソッドにアクセスすると「テスト太郎」と表示されるはずです。
では今度は、DBから取得した値をJavascript内で使ってみましょう。例えばクリックした位置を取得し、そこにDB内のusersテーブルから1件取得し、その1件のうちのname属性の値を出力させてみましょう。
app/controllers/users_controller.rb
def index
@users = User.all
gon.user_name = @users.first.name
end
app/assets/javascripts/users.js.coffee
$ ->
$("div#movie_list").click (e) ->
[x, y] = pointedBlock(e)
block = $("<div class='block' style='left: #{x}px; top: #{y}px;'>#{gon.user_name}</div>")
$(e.target).append(block)
pointedBlock = (e) ->
canvas = $(e.target)
x = e.pageX - canvas.position().left
y = e.pageY - canvas.position().top
[x, y]
こう書くとクリックした箇所にusersテーブルから取得したデータのnameカラムの値を表示します。
このgonには他にもメソッドがあります。
gon.all_variables #設定した変数を全件取得
gon.clear # 設定した変数を削除する
javascriptとrailsの連携が出来たと思います。これを使うとまた開発の幅が広がる気がします。