coen.bakker
LiveView.JS utility commands and phx-bindings: suggesting `toggle_attribute()` and `phx-has-value`
I gladly use LiveView.JS utility commands and phx-bindings. Sometimes, however, I can’t quite find what I’m looking for.
Alongside LiveView.JS’s set_attribute() and remove_attribute(), a toggle_attribute() can be useful. To easily toggle disable on an input field, for example. Say you want to disable an input field when another input field was given a value by the user. And you want to enable the input field again, when the user removes the value of that other input field. A solution could be triggering toggle_attribute() with a phx-binding that fires when an input field changes from having a value (e.g. “Example”) to not having a value (e.g. “”). Maybe phx-has-value?
JavaScript is, of course, always an option, but I enjoy the times I can use LiveView.JS.
Most Liked
LostKobrakai
I’d suggest looking into JS.dispatch, which can often give you the middleground between implementing custom behaviour, but still triggered/controlled through Phoenix.LiveView.JS.
trisolaran
would make a lot of sense indeed. Same for toggle_class. It would be useful in many situtations, for example to create a button that shows/hides a sidebar, or a dropdown, or some collapsable content. I bet it will be added in future LV versions.
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
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
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.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"