Ternary if in new HEEx Live Template

nesimtunc

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

Thank you in advance!

11 comments

/phoenix #liveview #heex #liveview-heex

1 2626 11

2023-03-31 01:49:08 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

lubien

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"

Post #1

aiwaiwa

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

Post #2

nesimtunc

Can we do this in HTML template file?

Post #3

nesimtunc

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?

Post #4

chrismccord

Creator of Phoenix

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

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

Post #5

nesimtunc

I must tell @chrismccord sensei but I don’t like this syntax 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

Post #6

LostKobrakai

<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.

Post #7

aiwaiwa

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

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

But both work for sure

Post #8

nesimtunc

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:

Post #9

aiwaiwa

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