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!
1 Like
lubien
March 26, 2023, 3:13pm
2
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 ==
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
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.
3 Likes
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
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!
