PhoenixGon Hex.pmBuild Status

Your Phoenix variables in your JavaScript.

img

Installation

If available in Hex, the package can be installed by adding phoenix_gon to your list of dependencies in mix.exs:

def deps do
[{:phoenix_gon, "~> 0.3.0"}]
end

Usage

Three steps configuration:

  1. You need add plug to lib/project/endpoint.ex before you router plug.
defmodule Project.Endpoint do
...
plug PhoenixGon.Pipeline
plug Project.Router
end

Plug accepts options:

- `:env` - this option for hard overloading Mix.env.
- `:namespace` - namescpase for javacript object in global window space.
- `:assets` - map for keeping permament variables in javascript.
  1. Add possibility to use view helper by adding use PhoenixGon.View in templates in web/views/layout_view.ex file:
defmodule Project.LayoutView do
...
import PhoenixGon.View
...
end
  1. Add helper render_gon_script to you layout in /web/templates/layout/app.html.eex before main javascript file:
...
<%= render_gon_script(@conn) %>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>

Now you can read phoenix variables in browser console and javascript code.

Phoenix controllers

For using gon in controllers just add:

defmodule Project.Controller do
...
import PhoenixGon.Controller
...
end

Controller methods:

All controller variables are kept in assets map.

Example:

def index(conn, _params) do
conn = put_gon(conn, controller: variable)
render conn, "index.html"
end

JavaScript

Gon object is kept in window.

Browser

Now you can access to you variables in console:

// browser console
Gon.assets()
// Object {controller: "variable"}

JavaScript assets

// Somewhere in javascript modules
window.Gon.assets()

JavaScript methods:

Phoenix env methods:

Assets variables methods:

Contributors

Special thanks to Andrey Soshchenko @getux.

License

The library is available as open source under the terms of the MIT License.