mrmurphy

mrmurphy

How exactly does phx-update detect changes?

I’ve run into a situation where I’ve got a list of posts inside of a container that uses phx-update=“prepend”, and the posts on the socket are temporary assigns. Inside of the “for” comprehension, I want to render data not only from the post, but from another assign on the socket.

When the post changes, my DOM updates render, but when the other assign I’m using (pending_loves, in the image) changes, I don’t get any DOM updates. I’m guessing this is because live view is doing some magic change tracking around the for comprehension specifically? What’s the most idiomatic way to inform Live View that I want the content inside of the for to update when a different assign changes as well?

Most Liked

mrmurphy

mrmurphy

Thanks! Victor Mono:

dimitarvp

dimitarvp

Thank you! Instant switch in my terminal programs. Can’t believe I missed it even though I have it in my library.

Previously used InconsolataGo but Victor Mono is definitely better. :slight_smile:

mrmurphy

mrmurphy

I thought maybe if I included the pending_loves assign on the right-hand side of the for comprehension, the change would be picked up and re-rendered. But no dice:

  <div id="posts" class="max-w-lg mx-auto dark:bg-gray-800" phx-update="prepend">
    <%= for {post, pending_loves} <- (@posts|>Enum.map(&({&1, get_pending_loves(@pending_loves, &1.id)}))) do %>
    <div id="<%= post.id %>">

Even with this change, when I update the assign @pending_loves, the count of pending loves does not update on the page inside of the for comprehension until the post object is updated. It does update if placed outside of the comprehension, though, even inside of the phx-update="prepend" container.

Where Next?

Popular Backend topics Top

chasekaylee
Hi there everyone! Recently, I have fallen in love with programming with Elixir and have been having so much fun with it. I have been do...
New
New
AstonJ
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
New
dimitarvp
Hey everyone, I resumed work on my Elixir &lt;=&gt; SQLite library (which uses a Rust NIF underneath) and I am in a need of small and we...
New
Fl4m3Ph03n1x
Background While playing around with dialyzer, typespecs and currying, I was able to create an example of a false positive in dialyzer. ...
New
GermaVinsmoke
Does anyone know beginner friendly Elixir/Phoenix Open source projects? For learning purpose :slightly_smiling_face:
New
sona11
I’m having a difficulty. I want to modify an attribute’s data type from String to Array. { “id”: “trn:tarb:tradingpartner:uuid:00000...
New
Fl4m3Ph03n1x
Background I am a fan of dialyzer and friends (looking at Gradient) and I try to have sepcs in my code as much as I can. To this end, I a...
New
Fl4m3Ph03n1x
Background I have to queries that return a colossal amount of data on their own. I cannot use Repo.all as doing so would materialize thes...
New
harwind
I received this error for a binary search programme in C, despite the fact that it requested for inputs and produced the right output. Th...
/c
New

Other popular topics Top

PragmaticBookshelf
Take your Go skills to the next level by learning how to design, develop, and deploy a distributed service. Start from the bare essential...
New
PragmaticBookshelf
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
New
DevotionGeo
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
AstonJ
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
husaindevelop
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New
AstonJ
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
New