i-n-g-m-a-r

Assign variable inside ~L or .leex template

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.

6 comments

/phoenix #leex #liveview

0 3768 6

2020-06-06 12:56:08 UTC

First Post!

Nicd

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

Post #1

Most Liked

i-n-g-m-a-r

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:

Avoid passing block expressions to library and custom functions

Never do anything on def render(assigns) besides rendering a template or invoking the ~L sigil

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.

Post #2

i-n-g-m-a-r

Without any penalty ?

Avoid defining local variables [..]

Post #4

wolf4earth

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):