gonを使ったRailsとJavascriptの連携について

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の連携が出来たと思います。これを使うとまた開発の幅が広がる気がします。