James_E
HEEx: Pass through all attributes?
I have the following utility template, for a list that is required to be rendered as a grid whenever CSS is enabled:
<%!-- grid_list.html.heex -->
<ul
class={[
"tw-grid",
"tw-grid-cols-#{Enum.count(@entries) |> :math.sqrt |> :math.ceil |> trunc}",
@class
]}
>
<li :for={entry <- @entries}>{render_slot(@inner_block, entry)}</li>
</ul>
<%!-- https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names
"tw-grid-cols-1"
"tw-grid-cols-2"
"tw-grid-cols-3"
"tw-grid-cols-4"
"tw-grid-cols-5"
"tw-grid-cols-6"
"tw-grid-cols-7"
"tw-grid-cols-8"
--%>
I invoke it, for example, as so:
<.grid_list :let={asset} entries={@state.assets} class="tw-p-1 tw-gap-1 sm:tw-p-4 sm:tw-gap-4">
<.asset asset={asset}/>
</.grid_list>
So my question is: is there any way for me to have the template automatically pass through any “extra” attributes, such as title, that I invoke it with? Or do I have to hardcode the “whitelist” of allowed passthrough attributes?
Most Liked
steffend
Phoenix Core Team
When you want to use attr / slot with an external .heex file you need to define an empty function head in the .ex file that has embed_templates. There’s an example in the docs: Phoenix.Component — Phoenix LiveView v1.2.5
2
Popular in Questions
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
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
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Hello, how can I check the Phoenix version ?
Thanks !
New
How to bind a phoenix app to a specific ip address?
could not find anything about that, nowhere, unfortunately, but for me this is quite...
New
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)?
Would
mix ecto.rollback -v 200809061...
New
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
I will often find my self writing things similar to:
case some_value do
nil -> something()
"" -> something()
_ -> somethi...
New
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
Other popular topics
What is the idiomatic way of matching for not nil in Elixir?
E.g.,
First way:
defp halt_if_not_signed_in(conn, signed_in_account) when...
New
After calling mix ecto.create I get this error:
17:00:32.162 [error] GenServer #PID<0.412.0> terminating
** (Postgrex.Error) FATAL...
New
Hey all,
I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set?
Thanks.
New
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
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Hi folks,
Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
New
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
Got a question about when to concat vs. prepending items to list then reversing to achieve appending.
So i know lists boil down to [1 | ...
New
Hi everyone,
I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








