RailsからJavaScriptにデータを渡す

Last updated at 2012-12-26Posted at 2012-10-24

単純な文字列を渡すとかならともかく、オブジェクトをJSON形式で渡せると便利ですよね。それもいちいち通信してコールバックから貰うとかは面倒！

ここでは簡単にできる2通りのやり方を紹介。

##1. Viewに埋め込む
一番単純な方法。

###ERB

view.html.erb

<%= javascript_tag do %>
  window.your_object = <%= raw @your_object.to_json %>;
<% end %>

###HAML

view.html.haml

= javascript_tag do
  board_event = #{raw @board_event.to_json};

エスケープは一切してないので注意してください。

##2. Gon gemを使う

Viewに書くのが気持ち悪い場合、大量に渡すデータがある場合。Gon gem を使うとスッキリControllerに書けます。

###2-1.準備

gem 'gon'

$ bundle installして、ヘッダに以下の一行を埋め込むと準備完了。

views/layouts/application.html.erb

.
.
    <%= include_gon %> #←これだけ！
    <%= javascript_include_tag "application" %>
    <%= stylesheet_link_tag    "application" %>
.
.

##2-2.サンプル
controllerに適当に埋め込むだけ。

your_controller.rb

def hoge
.
.
  gon.hoge = your_object
.
.
end

ブラウザで開き、コンソールでgon.hogeを打つと、ちゃんとjsオブジェクトになっています。(DOMロード前に読み込めます)　普通にソース中に埋め込まれてるだけみたいです。

gon.all_variablesで全ての変数を確認したり、gon.clearで初期化したりもできます。
オプションでgon.watchを使うことで、gon.hogeを書き換えるだけでブラウザをリロードするなくデータを更新したりもできるみたいです。

253