Sebb

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

  1. If the the drawer component changes the open-state itself, it will be overwritten with the next LV-update. This can be fixed in onBeforeElUpdated for example but it gets messy
  2. @is-open would have to be in the assigns, but it’s not really application state. It’s rather the result of the imperative drawer.open(). Also there would have to be an @is_open for 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

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?

Where Next?

Popular in Questions Top

Tee
can someone please explain to me how Enum.reduce works with maps
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
Lily
In templates/appointment/index.html.eex: &lt;%= for appointment &lt;- @appointments do %&gt; &lt;tr&gt; &lt;td&gt;&lt;%= appoi...
New
ycv005
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
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
vegabook
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
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
nsuchy
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
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

We're in Beta

About us Mission Statement