Euphorichuman

Euphorichuman

Concat string wit attributes in html attributes

I’ve been starting to work with Phoenix framework, I am currently following some LiveView tutorials. The tutorial that I am currently following has some syntax that is deprecated: Specifically when concatenating a string with an attribute in the attributes of an Html tag:

Old way:

def render(assigns) do
    ~H"""
    <div id="post-<%= @post.id %>" class="post"></div>
    """
end

But with the above shows me the following compilation error:

.../post_component.ex:6:19: expected closing `"` for attribute value

Make sure the attribute is properly closed. This may also happen if
there is an EEx interpolation inside a tag, which is not supported.
Instead of

    <div <%= @some_attributes %>>
    </div>

do

    <div {@some_attributes}>
    </div>

How can I get the tag id as follows: "post-1"?

Marked As Solved

shd42

shd42

You can use the new syntax with Heex (~H):

<div id={"post-#{@post.id}"} class="post"></div>

This post about Phoenix 1.6 upgrade should help you for the changes that have come up since it came out (note that LiveView 0.17 added/changed a number of other things, so look at the changelog for them too):
https://www.phoenixframework.org/blog/phoenix-1.6-released

Also Liked

LostKobrakai

LostKobrakai

Maybe it helps if you think about it this way:

Html attributes are either static or dynamic.

<div static="…" dynamic={…} />

What you put into static attributes is plain text as is. What you put in dynamic attributes can be any valid elixir expression. This includes, but is not limited to, interpolating something into a string.

Where Next?

Popular in Questions Top

Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New

We're in Beta

About us Mission Statement