jaimeiniesta

jaimeiniesta

Interpolating boolean attributes in HEEx

What is the proper way to interpolate boolean attributes like checked in an input in the new HEEx engine?

For example, in LEEx if I wanted to include it based on some condition, I would do this:


<input type="checkbox" name="web_pages[]" value="<%= w.id %>" <%= if w.id in @selected, do: "checked" %> />

Which would generate HTML like this:


<input type="checkbox" name="web_pages[]" value="1" />

<input type="checkbox" name="web_pages[]" value="2" checked />

Now in HEEx I do this


<input type="checkbox" name="web_pages[]" value={w.id} checked={if w.id in @selected, do: "true", else: nil} />

Which also works, if a nil value is passed then the checked attribute won’t be passed at all, but if I pass true then it will generate this:


<input type="checkbox" name="web_pages[]" value="2" checked="true" />

Which is correct, but longer and a bit uglier. I would have expected that this would work:


<input type="checkbox" name="web_pages[]" value={w.id} {if w.id in @selected, do: "checked"} />

But it doesn’t, it fails with protocol Enumerable not implemented for nil of type Atom. It looks like interpolation must always be bound to an attribute name in the HTML tag, right?

Marked As Solved

LostKobrakai

LostKobrakai

<input type="checkbox" checked={@boolean}> should just work.

Also Liked

jaimeiniesta

jaimeiniesta

Ah! It does! The following works as expected, generating a valueless attribute for true or no attribute for false.

<input type="checkbox" name="web_pages[]" value={w.id} checked={w.id in @selected} />

Awesome, thanks!

LostKobrakai

LostKobrakai

I’ve no heex project at hand to check, but I’m quite confident it just generates a valueless attribute or no attribute.

Last Post!

crockwave

crockwave

Here is a Surface reference on boolean attributes. Is there corresponding documentation in Phoenix Liveview on this subject that we can reference?

Surface (surface-ui.org)

Where Next?

Popular in Questions Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
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
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

We're in Beta

About us Mission Statement