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?
1
Popular in Questions
Hi,
is there any work on GUI with Elixir, that is similar to Electron/Javascript? My idea is to bundle Phoenix and BEAM into a single se...
New
Hello, I get Persian date from my client and convert it to normal calendar like this:
def jalali_string_to_miladi_english_number(persi...
New
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
I have followed this StackOverflow post to install the specific version of Erlang.
And When I am running mix ecto.setup then getting fol...
New
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
I am trying to run a deploy with docker and I successfully runned with this command:
docker build -t romenigld/blog-prod .
but when I t...
New
Hi there,
I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
Lets say I have map like this fetching from my database
%{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
Other popular topics
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
Hey all,
I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set?
Thanks.
New
Phoenix 1.4.0 released
Phoenix 1.4 is out! This release ships with exciting new features, most notably
with HTTP2 support, improved deve...
New
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
Hey,
Just curious what are the main benefits of Elixir compared to Clojure?
When is Elixir more useful than Clojure and vice versa?
Th...
New
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this:
...
New
Using vs code and installed ElixirLS: support and debugger.
And I got an error popped up on start up says
Failed to run ‘elixir’ comma...
New
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
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








