gonというgem

JavaScript Rails

先ほど、Railsの値をjavascriptに渡せるようにしてくれるgemである、gonというものを使用してみました！！

Railsの値をjavascriptに渡す方法は他にもあると思いますが、個人的にgonを使ったやり方がとても簡単だったのでいい感じでした！！

そのやり方をメモしておきます。

 

 

gonとは

gonとは、Railsの変数を、javascriptで使える変数に変換してくれるgemです。

以下がgonのリポジトリです！

github.com

 

 

準備

①gemファイルに gem 'gon' と追記し、bundle install を実行します。

 

②app/views/layouts/application.html.slim ファイルのhead内に include_gon と追記します。

doctype html
html
  head
    meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/
    title TodoManagementApp
    = csrf_meta_tags
    = csp_meta_tag
    link[rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"]
    script[src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"]
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track':'reload'
    = include_gon
    = javascript_include_tag 'application', 'data-turbolinks-track':'reload'

これで準備は完了です！

 

基本的な使い方

①コントローラ内において、以下のように,

gon.js内で使いたい変数名 = Rails内での変数

と書きます。

app/controllers/tasks_controller/rb

def edit
  @lavel_list = @task.lavels.pluck(:lavel_name).join(",")
  gon.lavel_list = @task.lavels.pluck(:lavel_name).join(",")
end

 

②すると、javascriptの変数として、gon.lavel_listを使用することが出来ます。

app/assets/javascripts/task.js

$(document).on('turbolinks:load', function() {
  $("#task_lavels").tagit({
    fieldName:"tags[]"
  });
  if (gon.lavel_list) {
    tags = gon.lavel_list.split(",");
    for (i in tags){
       $('#task_lavels').tagit('createTag', tags[i])
     }
  }
})