Liveview temporary_assigns update only

Phoenix Forum Questions / Help
1

I have an use case where I need to update a single item in collection and discard if it does not exists in DOM. When phx-update == “replace” LV replaces the entire collection. What is the best approach to replace a single item without append?

Sample code:

<div class="cr-section" id="classifieds" phx-update="replace">
  <%= for o <- @result do %>
  <div id={o.id} class="cr-head relative">
    <div phx-click="show_detail" phx-value-id={o.id} class="cursor-pointer">
      <div class="relative">
      ....

  def handle_info(%{action: :update, item: item}, socket) do
    Logger.debug "update item"
    {:noreply, assign(socket, :result, [item])}
  end
2

You can discard a temporary assign item with append. Just add a css class on some condition that will hide it and append will take care to update it.

For a delete action, you could do:

<div id={o.id} class={"cr-head relative #{if o.__meta__.state == :deleted, do: "hidden"}"}>

where:

.hidden {
  display: none;
}
3

Sorry. I did not explain the use case correctly.

The updated item will be broadcasted and only users that have this item in DOM should see.

I think is missing a phx-update option.

Today we have:
“ignore” - do nothing
“append / prepend” - update and append if does not exist
“replace” - replace the whole collection

Maybe: “update” - update the items found in DOM but do not append

I solved with javascript but is a sort of pain to maintain

4

I see what you mean. Something like a list of items that can be filtered. An item is updated and broadcasted to all clients. Some of the clients filtered the list of items and that particular item isn’t listed on their view anymore. It shouldn’t be appended in this case.

I think your proposal of an update-only option is worthy of a discussion.

5

My understand is that append/prepend will actually update an existing element if the ID already exists. From the docs:

LiveView uses DOM ids to check if a message is rendered before or not. If an id is rendered before, the DOM element is updated rather than appending or prepending a new node. Also, the order of elements is not changed. You can use it to show edited messages, show likes, or anything that would require an update to a rendered message.

6

The use case here is that if it doesn’t exists, it shouldn’t append/prepend it to the list. Update if in the DOM, ignore otherwise.

7

Ah right, yes!