Sebb
Push JS Commands to the client
I’d like to do sth in the line of
JS.push_to_client(
socket,
JS.set_attribute({"some-attr", "some-value"}, to: "#some-id")}
)
What would be the best way to accomplish that?
Background
I try to get webcomponents to work with LV.
One of the major pain points are attributes that are changed by the components, most common example is sth like @open for a drawer.
So it’s not ideal to do
~H"""
<wc-drawer open={@is_open} ... />
"""
because
- If the the drawer component changes the open-state itself, it will be overwritten with the next LV-update. This can be fixed in
onBeforeElUpdatedfor example but it gets messy @is-openwould have to be in the assigns, but it’s not really application state. It’s rather the result of the imperativedrawer.open(). Also there would have to be an@is_openfor each WC used.
So I think the best way would be to just command the drawer to open and forget about it afterwards.
Marked As Solved
benlime
There is push_event/3 which you can use either with a hook or a global event listener.
If you use a hook, you can use the handleEvent function to set the attribute.
const AttributeHook = {
mounted() {
this.handleEvent("set_some_attr", data => {
this.el.setAttribute(data.attr_name, data.value)
}
}
}
def mount(socket) do
socket = push_event(socket, "set_some_attr", %{ attr_name: "foo", value: "bar" })
{:ok, socket}
end
def render(assigns) do
~H"""
<wc-drawer phx-hook="AttributeHook" />
"""
end
Or if you just want to do it on mount and not on a server event:
def render(assigns) do
~H"""
<wc-drawer phx-mounted={JS.set_attribute({"some-attr", "some-value"}, to: "#some-id")} />
"""
end
Why does is_open needs to be a server state?
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
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.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"