Ternary if in new HEEx Live Template

Hello everyone,

I’m seeking help in converting the following HTML code snippets into the new HEEx template format:

<dd class="descp" lang='<%= (if v.lang_code == "a", do: "b", else: "c")%>'><i><%= v.descp %></i>
</dd>
<meta property="al:ios:url" content='myapp://<%= if(@conn.assigns[:query], do: "w/" <> @conn.assigns[:query], else: "") %>'/>

In old version we used to do like this:

<meta name="keywords" content='bla bla <%= if(@conn.assigns[:query], do: @conn.assigns[:query], else: "") %>'/>

But now I can do this like this according to the doc, but it doesn’t seem convenient for me.

<% keywords = "bla bla" %>
<% if @conn.assigns[:query] do %>
  <% keywords = keywords <> @conn.assigns[:query] %>
<% end %>
<meta name="keywords" content='@{keywords}'/>

So, tell me the best practice please :slight_smile:

Thank you in advance!

1 Like

How about:

~H"""
<dd class="descp" lang={lang_propery_for_lang_code(v.lang_code)}><i><%= v.descp %></i>
</dd>
"""

and on your core components:

def lang_propery_for_lang_code("a"), do: "b"
def lang_propery_for_lang_code(_other), do: "c"
1 Like

So content={if true, do: "this", else: "that"} does not work for you?

2 Likes

Can we do this in HTML template file?

I think I could manage like this:

<ul id='languages_{if @mobile, do: "mobile", else: ""}' class="dropdown-content">

However due to conditional HTML tag the compiler thinks it’s not closed, so, it won’t compiler at the moment.

<%= if @mobile do %>
    <ul id="nav-mobile" class="sidenav" style="transform: translateX(-105%);">
<% else %>
    <ul class="right hide-on-med-and-down">
<% end %>
        <li>
            <a class='dropdown-trigger' href='#' 
            data-target='languages_{if @mobile, do: "mobile", else: ""}'>
                <i class="material-icons right">language</i>
            </a>
        </li>
    </ul>
<ul id='languages_{if @mobile, do: "mobile", else: ""}' class="dropdown-content">
    <li><a href="/" lang="a">A</a></li>
    <li><a href="/tr" lang="b">B</a></li>
    <li><a href="/en" lang="c">C</a></li>
</ul>

Error:

== Compilation error in file lib/ferhengco_web/views/layout_view.ex ==
** (Phoenix.LiveView.HTMLTokenizer.ParseError) lib/myapp_web/templates/layout/_menu.html.heex:12:5: missing opening tag for

We know it will be open and close eventually when it’s rendered, but why compiler can’t understand this? Previously, before upgrade to live view it was working fine like this.

I’m thinking to move a li item to a variable and use in both case within <ul>@{langs}</ul>

Is there a better way to do this?

You need to use {} for the dynamic expression like @lubien first showed:

<ul id={"languages_#{if @mobile, do: "mobile", else: "..."}"} class="dropdown-content">
3 Likes

I must tell @chrismccord sensei but I don’t like this syntax :slight_smile: Thank you!

I’m able to compile only this way, I get this visual error in VSCode, not sure which extension is showing this though.

Single Quote

Doube Quote

<ul id={if(@mobile, do: "nav-mobile")} …>

You don’t need to wrap an outer condition in a string. Within attr={…} any elixir expression is allowed. id={nil} won’t render the attribute, but won’t cause any issues, so you can also skip the else part of the if.

4 Likes

Feels like you have some mismatched parenthesis somewhere. May be outdated plugin

image

Which, as @LostKobrakai points out, can be simplified as interpolation is indeed unnecessary (in first case)

image

But both work for sure

2 Likes

This way is much better and it works!

<ul id={if @mobile, do: "nav-mobile"} 
 class={if @mobile, do: "sidenav", else: "right hide-on-med-and-down"}
 style={if @mobile, do: "transform: translateX(-105%);"}>

But with same plug-in error. Which plug-in do you use? I’m using these ones:



.vscode/settings.json:

{
	"files.associations": {
		"*.heex": "phoenix-heex",
	},
	"[elixir]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "JakeBecker.elixir-ls"
	},
	"[phoenix-heex]": {
		"editor.formatOnSave": true,
		"editor.defaultFormatter": "JakeBecker.elixir-ls"
	},
	"emmet.includeLanguages": {
		"phoenix-heex": "html",
		"elixir": "html",
	},

Some great hex plugins:

2 Likes

Thanks a lot for the plugins! :slight_smile: