Assign variable inside ~L or .leex template

Phoenix Forum Questions / Help
, ,
1

Suppose my LiveComponent contains some complex state.
In my liveview template I need to get some values that are nested inside that state.
For example the state contains a map: assigns.x.y.z.my_map and I need to get various values from my_map.
How would I assign my_map to a variable inside my template?

Currently I’m creating a list so that I can use for.
That doesn’t seem right though.

def render(assigns), do: ~L"""
  <section id="<%= assigns.x.id %>">
    <%= for m <- [assigns.x.y.z.my_map] do %>
      <ul>
        <li><%= m.foo %></li>
        <li><%= m.bar %></li>
        <li><%= parse_qux(m.qux) %></li>
      <ul>
    <% end %>
  </section>
"""

I don’t want to do this:

def render(%{x: %{y: %{z: %{my_map: m}}}} = assigns), do:

Maybe something like this?

def render(assigns), do:
  render(assigns, assigns.x.y.z.my_map)

defp render(assigns, m), do: ~L"""
  <section id="<%= assigns.x.id %>">
    <ul>
      <li><%= m.foo %></li>
      <li><%= m.bar %></li>
      <li><%= parse_qux(m.qux) %></li>
    <ul>
  </section>
"""

I’m not sure how either approach would affect performance and/or have side effects.

2

Would this work?

def render(assigns) do
  m = assings.x.y.z.my_map
  ~L"""
    <section id="<%= assigns.x.id %>">
      <ul>
        <li><%= m.foo %></li>
        <li><%= m.bar %></li>
        <li><%= parse_qux(m.qux) %></li>
      <ul>
    </section>
  """
end
3

I’m afraid not, from the docs:

Similarly, do not define variables at the top of your render function:

def render(assigns) do
  sum = assigns.x + assigns.y

  ~L"""
  <%= sum %>
  """
end

Also from the docs:

To sum up:

  1. Avoid passing block expressions to library and custom functions
  2. Never do anything on def render(assigns) besides rendering a template or invoking the ~L sigil
  3. Avoid defining local variables, except within for , case , and friends

When the contents of assigns is complex, this gets ugly fast.

All of this change tracking stuff is pretty hard to grasp.

Also, when you have a lot of nested LiveComponents, the assigns are not as simple/clean as the examples in the docs.
Suppose component x > y > z > foo has some setting bar, that’s not as simple as @bar.

1 Like
4

AFAIK you can use <% my_map = assigns.x.y.z.my_map %>:

def render(assigns), do: ~L"""
  <section id="<%= assigns.x.id %>">
    <% m = assigns.x.y.z.my_map %>
    <ul>
      <li><%= m.foo %></li>
      <li><%= m.bar %></li>
      <li><%= parse_qux(m.qux) %></li>
    </ul>
  </section>
"""
5

Without any penalty ?

Avoid defining local variables […]

1 Like
6

You’re right, I’ve checked the docs and you should not do that:

Another pitfall of .leex templates is related to variables. Due to the scope of variables, LiveView has to disable change tracking whenever variables are used in the template, with the exception of variables introduced by Elixir basic case , for , and other block constructs. Therefore, you must avoid code like this in your LiveEEx:

<% some_var = @x + @y %>
<%= some_var %>

Instead it’s recommended to use a function:

sum(@x, @y)

So in your case you could do this:

def render(assigns), do: ~L"""
  <section id="<%= assigns.x.id %>">
    <ul>
      <li><%= my_map(@x).foo %></li>
      <li><%= my_map(@x).bar %></li>
      <li><%= parse_qux(my_map(@x).qux) %></li>
    </ul>
  </section>
"""

Where my_map is defined like this (or using pattern matching):

def my_map(x), do: x.y.z.my_map
1 Like
7

I guess maybe that’s the way to go.
There must be some reason though why the docs say “avoid” instead of “never ever”.