RailsとJavascriptの連携
RailsアプリケーションとJavascriptの連携をしたい場合、[gon](https://github.com/gazay/gon)というgemがあります。これを使うとcontroller内でセットした変数をJavascript(rails3以上だとcoffeescriptを使うケースが殆どだと思いますが)内で使う事ができます。
設定
Gemfileにまずは追記します。
gem 'gon'
で書いたらbundle installを実行
bundle install次にapp/views/layouts/application.html.erbに以下を追記します。
<%= include_gon %> <%= javascript_include_tag "application" %>
使ってみる
controllerに内で変数をJavascript(coffeescript)内で使ってみましょう。
def index gon.name = 'テスト太郎' end
で、Javascriptのソースです。今回はcoffeescriptを使います。
$ -> $("div#movie_list").click (e) -> alert(gon.name)
これでusersのindexメソッドにアクセスすると「テスト太郎」と表示されるはずです。
では今度は、DBから取得した値をJavascript内で使ってみましょう。例えばクリックした位置を取得し、そこにDB内のusersテーブルから1件取得し、その1件のうちのname属性の値を出力させてみましょう。
def index @users = User.all gon.user_name = @users.first.name end
$ -> $("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.clean # 設定した変数を削除する
javascriptとrailsの連携が出来たと思います。これを使うとまた開発の幅が広がる気がします。