[JAVA] [Rails 5] Verwendung von gem gon ~ Übergabe von Variablen von Rails an JS ~

Implementierte Funktion

Entwicklungsumgebung

ruby > 2.6.5
rails > 5.2.4.2
gon > 6.3.2

Übergeben Sie diesmal einfach die in Rails Controller definierten Variablen an JS und zeigen Sie sie in HTML an. Es mag flüssiger sein, im Format "hoge.js.erb" oder "coffeescript" zu schreiben, das standardmäßig mit Rails geliefert wird, aber ich dachte, es wäre ein Juwel, das als Problemumgehung verwendet werden kann, wenn es nicht gut angezeigt werden kann, also werde ich es vorstellen. ..

※Hinweis Aufgrund der Gem-Spezifikationen wird die Variable selbst in der HTML-Quelle angezeigt. Daher ist es besser, sie nicht für Dinge zu verwenden, die aus Sicherheitsgründen ausgeblendet werden müssen.

Einführungsmethode

Fügen Sie zunächst Gemfile hinzu

`Gemfile`


gem 'gon'

Und installieren

`Terminal`


$ bundle install

Schreiben Sie Code in die Rails-Ansicht Dieses Mal soll es auf allen Seiten verwendet werden, aber es ist in Ordnung, wenn es in der erforderlichen Ansicht beschrieben wird. Wie beim Lesen von JS unterscheidet sich das Verhalten je nach Lesezeitpunkt. Achten Sie daher auf die Lesereihenfolge.

`ruby:application.html.erb`


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

Sie sind jetzt bereit.

Variablen übergeben

Definieren Sie eine Variable für Gon im Rails Controller. Sie müssen der Variablen lediglich "gon" voranstellen.

`Users.erb`


def show
  @user = User.find(1)
  gon.username = @user.name #Übergeben Sie dies an JS
end

Übergeben Sie die Variable an JS und zeigen Sie sie in HTML an.

`ruby:index.html.erb`


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

`application.js`


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

Wenn es so angezeigt wird, ist es OK.

`index.html`


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

Informationen zur Anzeige in HTML

Am Anfang sprach ich über "Ich kann Variablen in HTML sehen". Es wird tatsächlich so geladen. Die Struktur ist leicht zu verstehen, gut oder schlecht, nicht wahr?

`index.html`


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

Andere Funktionen

Neben dem einfachen Übergeben von Variablen

Übergeben Sie ein Array und einen Hash --Lesen Sie alle Variablen

Es scheint, dass Sie es auch verwenden können. Dies könnte eher eine größere Rolle für Gem sein. Bitte überprüfen Sie die offizielle Seite für Details.

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