coen.bakker
Passing comprehension data from inside function component up to call of that function component
I have story_cards that render a list of authors, among other things. Clicking an author should open a modal, via a function set_modal_data/1. This function needs the to be passed one author (not all authors).
Is there a way to pass the set_modal_click/1 function to the story_card function component call (e.g. <.story_card ... on_author_click={...}/>? Currently, I am using slots to be able assign the set_modal_click/1 to the phx-click that should open the modal.
# current solution
<.story_card
:for={story <- @stories}
story={story}
>
<:author let={author}>
<span
class="pub-cover-author-tag"
phx-click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
>
<%= author.username %>
</span>
</:author>
</.story_card>
# hypothesized solution
<.story_card
:for={story <- @stories}
story={story}
let={author}
on_author_click={set_modal_data(%{"id" => author.id, "modal" => "user"})}
/>
Ty
Marked As Solved
sodapopcan
That makes sense!
It should work with the capture:
def story_card(assigns) do
~H"""
...
<li :for={author <- @authors}>
<a phx-click={@on_author_click.(author)}>...</a>
</li>
...
"""
end
def render(assigns) do
~H"""
<.story_card
authors={@authors}
on_author_click={&JS.push("some_event", value: %{author: &1})}
/>
"""
end
(sorry I forgot the @ in my original example)
Possibly you already got that but I wasn’t sure from your response ![]()
Also Liked
benwilson512
Be very careful with this. The user struct in this case is being sent to the JS front end unencrypted. I would strongly suggest pulling out specific keys that are relevant to the JS.
sodapopcan
You should be able to pass it as a capture:
<.story_card
:for={story <- @stories}
story={story}
on_author_click={&set_modal_data/1}
/>
and then:
phx-click={on_author_click.(%{"id" => author.id, "modal" => "user"})
I may also be misunderstand what you’re after, though!
sodapopcan
Right, you’d need to make sure you have the redacted fields set. Thanks for chiming in, I did not think of that!
Last Post!
sodapopcan
Me too as I’ve never really used JS.push before. I was reading it as push_event which of course doesn’t even make sense since that is on the other side, ha. So ya, I thought you were trying to do something far more complicated like calling out to a JS event that would push back to the server or something. It seems like JS.push and a regular bare event should be handled the same.
Popular in Questions
Other popular topics
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
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex









