[Rails 5] How to use gem gon ~ How to pass variables from Rails to JS ~

Implemented function

Development environment

ruby > 2.6.5
rails > 5.2.4.2
gon > 6.3.2

This time, simply pass the variable defined in Rails Controller to JS and display it in html. It may be smoother to write in the hoge.js.erb format or coffeescript that comes standard with Rails, but I thought it would be a gem that can be used as a workaround when it can not be displayed well, so I will introduce it. ..

※Caution Due to the Gem specification, the variable itself is displayed in the html source, so it is better not to use it for things that need to be hidden for security reasons.

Introduction method

First, add to Gemfile

Gemfile


gem 'gon'

And install

Terminal


$ bundle install

Write code in Rails View This time it is supposed to be used on all pages, but it is OK if it is described in the required view. As with reading JS, the behavior differs depending on the reading timing, so be careful about the reading order.

ruby:application.html.erb


・ ・ ・
<%= include_gon %>
<%= javascript_include_tag "application" %>
・ ・ ・
</body>

You are now ready.

Pass a variable

Define a variable for Gon in Rails Controller. All you have to do is prefix the variable with gon..

Users.erb


def show
  @user = User.find(1)
  gon.username = @user.name #Pass this to JS
end

Pass the variable to JS and display it in html.

ruby:index.html.erb


・ ・ ・
<p id="name"></p>
・ ・ ・

application.js


・ ・ ・
let name = gon.username
$('#name').html(name);
・ ・ ・

If it is displayed like this, it is OK.

index.html


・ ・ ・
<p id="name">Kohei</p>
・ ・ ・

About display in html

At the beginning, I talked about "variables can be seen in html". It is actually loaded like this. The structure is easy to understand, good or bad, isn't it?

index.html


・ ・ ・
  <script>
    //<![CDATA[
      window.gon={};gon.username="Kohei";
    //]]>
  </script>
</body>
・ ・ ・

Other functions

Besides simply passing variables

--Pass an array and hash --Read all variables

It seems that you can also use it. Rather, this may be a bigger role for Gem. Please check the official page for details.

** Gon Official ** https://github.com/gazay/gon

Recommended Posts

[Rails 5] How to use gem gon ~ How to pass variables from Rails to JS ~
[Rails] How to use gem "devise"
[Rails] How to use enum
[Rails] How to use enum
[Rails] How to use validation
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to use Scope
[Rails] How to use devise (Note)
[Rails] How to use flash messages
[Processing × Java] How to use variables
[Rails] How to use Active Storage
[Introduction to Rails] How to use render
How to use custom helpers in rails
[Ruby on Rails] How to use CarrierWave
[Rails] How to convert from erb to haml
[Rails] How to use rails console with docker
[Rails] How to use ActiveRecord :: Bitemporal (BiTemporalDataModel)
[Rails] How to use the map method
How to use MySQL in Rails tutorial
[Rails] Assigning variables from controller to JavaScript
[Flutter] How to use C / C ++ from Dart?
[Ruby on Rails] How to use redirect_to
[Note] How to use Rails 6 Devise + cancancan
[Ruby on Rails] How to use kaminari
How to use environment variables in RubyOnRails
[Rails] How to use video_tag to display videos
[Rails] How to use helper method, confimartion
How to use credentials.yml.enc introduced in Rails 5.2
How to link Rails6 Vue (from environment construction)
[Rails] How to use select boxes in Ransack
How to use rails g scaffold, functions, precautions
How to use scope and pass processing (Jakarta)
[Rails] How to use Gem'rails-i18n' for Japanese support
[Ruby on Rails] How to use session method
[Rails] How to use PostgreSQL in Vagrant environment
How to use Map
How to write Rails
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use fields_for
How to use java.util.logging
How to use map
How to use collection_select
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
How to uninstall Rails
[How to use label]
How to use identity
How to use JUnit 5
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
[rails] How to use devise helper method before_action: authenticate_user!
[Rails, JS] How to implement asynchronous display of comments