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.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"