[JAVA] [Rails 5] Comment utiliser gem gon ~ Comment passer des variables de Rails à JS ~

Fonction implémentée

Environnement de développement

ruby > 2.6.5
rails > 5.2.4.2
gon > 6.3.2

Cette fois, transmettez simplement les variables définies dans Rails Controller à JS et affichez-les en html. Il peut être plus facile d'écrire au format hoge.js.erb ou coffeescript qui est fourni en standard avec Rails, mais je pensais que ce serait un bijou qui pourrait être utilisé comme solution de contournement quand il ne peut pas être affiché correctement, donc je vais le présenter. ..

※Mise en garde En raison des spécifications Gem, la variable elle-même est affichée dans la source html, il est donc préférable de ne pas l'utiliser pour des choses qui doivent être cachées pour des raisons de sécurité.

Méthode d'introduction

Tout d'abord, ajoutez à Gemfile

`Gemfile`


gem 'gon'

Et installez

`Terminal`


$ bundle install

Écrire du code dans la vue Rails Cette fois, il est censé être utilisé sur toutes les pages, mais il est OK s'il est décrit dans la vue requise. Comme pour la lecture de JS, le comportement diffère selon le moment de la lecture, alors faites attention à l'ordre de lecture.

`ruby:application.html.erb`


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

Vous êtes maintenant prêt.

Passer des variables

Définissez une variable pour Gon dans le contrôleur de rails. Tout ce que vous avez à faire est de préfixer la variable avec «gon».

`Users.erb`


def show
  @user = User.find(1)
  gon.username = @user.name #Passez ceci à JS
end

Passez la variable à JS et affichez-la en html.

`ruby:index.html.erb`


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

`application.js`


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

S'il est affiché comme ça, c'est OK.

`index.html`


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

À propos de l'affichage en html

Au début, j'ai parlé de "je peux voir les variables en html". Il est en fait chargé comme ça. La structure est facile à comprendre, bonne ou mauvaise, n'est-ce pas?

`index.html`


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

Autres fonctions

En plus de simplement passer des variables

Passer un tableau et un hachage --Lire toutes les variables

Il semble que vous puissiez également l'utiliser. Au contraire, cela peut être un rôle plus important pour Gem. Veuillez consulter la page officielle pour plus de détails.

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