EEx interpolation of local variable inside a tag in heex templates

Questions / Help
, ,
1

What’s the equivalent Heex of this Leex example:

<ul>
<%= for {option, css_class} <- @options  do %>
        <li>
            <img src="<%= option.image %>" class="<%= css_class %>" />
        </li>
      <% end %>
</ul>

thanking in advance for your help and advice

2

Just replace the <%= ... %> tags with handlebars in the html tag arguments and it should work.

Take a look at Phoenix 1.6.0 Released under HEEx extension: Defining attributes.

1 Like
3

Thanks @moogle19 for your quick response but the example in the Heex

For instance, the following syntax is invalid:

<div class="<%= @class %>">
  ...
</div>
Instead do:

<div class={@class}>
  ...
</div>

Only works if class is in the assigns. Otherwise the template breaks. Of course dropping the @ has no effect. Could I be missing something ?

4

If you have optional attribute to the component, you can use assign_new/3 to assign a default value

assigns = assign_new(assigns, :class, fn -> "" end)

Below pages help you in learning more about heex -
https://hexdocs.pm/phoenix_live_view/assigns-eex.html

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html

@some_variable expands to assigns.some_variable in heex templates.

5

If you but it in your comprehension it should work.
E.g this works like expected:

<ul>
  <%= for no <- [1, 2, 3, 4] do %>
    <li tag={no}><%= no %></li>
  <% end %>
</ul>
1 Like
6

The brilliant coder, Liron Shimrony, tells me:

<li class={" some classes #{css_class}"} >

this works.

1 Like
7

Yes, if you want more than just the classes in your css_class your best choice is to use string interpolation inside the handlebars.

If you just need the classes in css_class, class={css_class} should be preferred over class={"#{css_class}"}.