LoginSignup
255
254

More than 5 years have passed since last update.

RailsからJavaScriptにデータを渡す

Last updated at Posted 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を書き換えるだけでブラウザをリロードするなくデータを更新したりもできるみたいです。

参考

Rails Cast #324 Passing Data to JavaScript

255
254
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
255
254