nduitz
Phoenix LiveView conditional phx-hook
Hey there.
I don’t know if this is intended behaviour, thus I wanted to open a discussion here before opening a bug report.
I tried to conditionally register a phx-hook (I have a timeline that under certain circumstances should be sortable).
I created a demo of the behaviour here: phx-hook-demo/lib/demo_web/hook_demo_live.ex at main · nduitz/phx-hook-demo · GitHub
To break it down:
Simply changing the value to enable does not do the trick (phx-hook={@enabled? && "SomeHook"}). However changing the id along with the enabled assign would invoke the mounted() callback of the hook: id={@enabled && "hooked" || "unhooked} phx-hook={@enabled? && "SomeHook"}
It seems that this behaviour exists for fair reasons but I think the documentation could be more explicit about this.
WDYT?
First Post!
Phxie
I assume you can’t toggle hooks via buttons because they are triggered by mount/update.
You could just connect the hook regardless, and have a data-attribute={@condition} on the hook element then check the data-attribute for true or false and run the code based on the outcome.
Most Liked
steffend
This is indeed not supported at the moment: Add a warning to the JS Hook documentation for changing phx-hook by Gazler · Pull Request #3509 · phoenixframework/phoenix_live_view · GitHub
garrison
My first instinct was to agree. But what happens if you do this?
<%= if @foo do %>
<div id="foo" phx-hook="MyHook" />
<% else %>
<div id="foo" phx-hook="OtherHook" />
<% end %>
Or this?
<%= if @foo do %>
<div id="foo" phx-hook="MyHook" data-foo="bar" />
<% else %>
<div id="foo" phx-hook="MyHook" data-hello="world" />
<% end %>
If changing the hook doesn’t remount the hook, then either both of these must trigger remount or neither must. And I’m not sure if either of those options feels correct to me.
Intuitively I would expect the hook to behave like a component, remounting if it has changed (id or phx-hook has changed), which is also clearly what the OP was expecting. Requiring the id to change is violating the declarative behavior of the API and forcing you to write imperative code (to update the id) in order to update the result, which will cause bugs.
sodapopcan
Hey fair enough! I’m coming from more of an XY place (without explicitly asking) as I’ve never run into this myself (nor have I ever changed an id).
Last Post!
steffend
That change is specific to LiveComponents, it doesn’t affect regular DOM nodes. And it only makes the behavior consistent between LiveComponents and any other node when changing its ID.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Chat & Discussions>Discussions
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
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
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"