Javascript と Rails での Gon Gem の使用

Rails データを JavaScript の一部として使用することは、特に Angular、Ember、SPA などの JavaScript アプリケーションの場合、非常に頻繁に必要になります。

データ量が少ない場合は、直接 Ruby 変数に代入できます。

レールビューから:
元：-

HTML:

<input id="user" type="hidden" value="" /> ; $('#user').val();

HTML データ属性:

<%= content_tag "div", id: "posts", data: {posts: Post.limit(5)} do %> 読み込み中 .. <% end %>;

$('#posts').data('posts');

Gon を使用して Rails コントローラーから:
上記のシナリオは、特に一部のデータではなくより多くの情報が必要な場合に、完璧で賢明なわけではないようです。

実際、Rails 変数をコントローラーから JavaScript に渡すための良い解決策、つまり gon gem があります。

Gon は、私たちのニーズをより簡単かつクリーンな方法で満たすのに役立ちます。

設定

gon gem のセットアップは非常に簡単です。

gem 'gon' を Gemfile に追加し、バンドル インストールを実行します。
入れる <%= include_gon %>; layouts/application.html.erbのheadタグ内。使いたい場所にどこにでも設置できます。特定のビューでのみ使用したい場合は、特定のビューに移動します。

コントローラー/ビューから変数を設定します (主にコントローラーから)

gon.currentUser = @user gon.title = 'サンプル Gon'

1TP5トール

gon.push({ currentUser: @user, title: 'サンプル Gon'' })

したがって、JavaScript では通常の変数として使用できます。

console.log(gon.currentUser); console.log(gon.title);

ノート：
変数の名前空間を変更できます。つまり、gon.variableName の代わりに app.variableName を使用できることになります。ただし、インクルードする場合は名前空間を指定する必要があります。

<%= include_gon(namespace: 'app') %>;

gon に設定できるオプションのリストは他にもあります (https://github.com/gazay/gon/wiki/Options)。
Gon は jbuilder と rabl(https://github.com/gazay/gon/wiki)
gon が未定義エラーになるのを防ぐために、少なくとも 1 つの変数を gon にプッシュします。そうでない場合は、定義されているかどうかを検証します。
Gon 変数は、次のようにレールからリロードできます。 ゴンウォッチ。詳細については、gon の公式ドキュメントを確認してください。

リソース：
https://github.com/gazay/gon

私たちの Facebook ページでこの記事をチェックしてください: https://www.facebook.com/RailsCarma