Gem『gon』を使ってモデルの値をJSに渡したいときの対応例 – #Rails

経緯と対応例

Rails上でタイマーのような時間を管理する機能の実装時にモデルの値をJSに渡したい事案。

対応例

• hiddenに入れたり、カスタムデータ属性にいれたり（hash）する手法がある。
• Ajaxでとってきたり。
• Gem『gon』を使う。
  • gazay/gon: Your Rails variables in your JS

いろいろ対応方法はありますが、今回はGemの『gon』を使ってみた。

インストールして使ってみる

[Gemfile]

gem 'gon'

• bundle install を実行する。

[views/layouts/application.html.erb]

<%= include_gon %>
<%= javascript_include_tag "application" %>

• 読み込み設定。

[hoge.controller.rb]

gon.user_name = 'テスト太郎'
gon.my_hash = @project
gon.push({
    :user_id => 1,
    :user_role => "admin"
})

• コントローラーで値を設定。

[hoge.coffee]

$(document).on 'turbolinks:load', ->
    console.log(gon.user_name)
    console.log(gon.my_hash)
    console.log(gon.user_role)
    console.log(gon.all_variables)
    console.log(gon)

• メソッドがそれぞれ用意されている。この辺は公式を確認。

参考にさせていただいたサイト

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