Using Helpers
That link function packs a surprising amount of punch into a small package. Phoenix helpers provide a convenient way to drop common HTML structures onto your view. There’s nothing special about them. Helpers are simply Elixir functions. For example, you can call the functions directly in IEx:
| | $ iex -S mix |
| | iex> Phoenix.HTML.Link.link("Home", to: "/") |
| | {:safe, [60, "a", [[32, "href", 61, 34, "/", 34]], |
| | 62, "Home", 60, 47, "a", 62]} |
The return value might look a little odd. We received a tuple with :safe, followed by an unusual looking list of values. This list is known as an I/O list. I/O lists are simply lists of values which allow data to be efficiently used for I/O, such as writing values to a socket. Let’s convert this result into a human-readable form by calling Phoenix.HTML.safe_to_string/1:
| | iex> Phoenix.HTML.Link.link("Home", to: "/") |> Phoenix.HTML.safe_to_string() |
| | "<a href="/">Home</a>" |
The second argument to our link function is a keyword list, with the to: argument specifying the target. We use a path that’s automatically created for our :show route to specify the link target. Now you can see that our list has the three users we fetched from our repository as shown in the figure.
At this point you may be wondering where the HTML helpers come from. At the top of each view, you can find the following definition: use RumblWeb, :view. This code snippet is the one responsible for setting up our view modules, importing all required functionality. Open up lib/rumbl_web.ex to see exactly what’s imported into each view:
| | def view do |
| | quote do |
| | use Phoenix.View, root: "lib/rumbl_web/templates", |
| | namespace: RumblWeb |
| | |
| | # Import convenience functions from controllers |
| | import Phoenix.Controller, |
| | only: [get_flash: 1, get_flash: 2, view_module: 1] |
| | |
| | # Use all HTML functionality (forms, tags, etc) |
| | use Phoenix.HTML |
| | |
| | import RumblWeb.ErrorHelpers |
| | import RumblWeb.Gettext |
| | alias RumblWeb.Router.Helpers, as: Routes |
| | end |
| | end |
The view function uses Elixir’s quote to inject a chunk of code into each view. Since the contents of each quote are executed for each view, you want to keep it short and sweet, limiting these chunks only to imports, uses, and aliases. In our case, one of those injected statements is use Phoenix.HTML.
Phoenix.HTML is responsible for the HTML functionality in views, from generating links to working with forms. Phoenix.HTML also provides HTML safety: by default, applications are safe from cross-site scripting (XSS) attacks, because only the markup generated by Phoenix.HTML functions is considered safe. That’s why the link function returns a tuple. The first element of the tuple—the :safe atom—indicates that the content in the second element is known to be safe.
To learn about existing HTML helpers, visit the Phoenix.HTML documentation.[13]
Keep in mind that the rumbl_web.ex file is not a place to attach your own functions. You want to keep this file skinny and easy to understand. For example, the contents of the view function will be macro-expanded to each and every view! So remember, in rumbl_web.ex, prefer import statements to defining your own functions.
That’s a good amount of progress so far. Let’s create one more action, and the corresponding template, to round out our actions.