Multiple live-streams to render UI elements: must be separate lists?

Phoenix Forum Questions / Help
, , ,
1

Let’s say you have multiple streams in your socket assigns and you want to render the items of these streams as items in your UI. I was wondering whether then is required to render those streams as separate lists of UI elements.

For example, is the second option also possible?

  1. Separate lists
def mount(_, _, socket)
  socket
  |> stream(:posts, posts)
  |> stream(:attachments, attachments)

  {:ok, socket}
end

def render(assigns) do
  ~H"""
  <div phx-update="stream">
    <%= for {dom_id, post} <- @streams.posts do %>
      <.post id={dom_id} post={post}/>
    <% end %>
  </div>
  
  <div phx-update="stream">
    <%= for {dom_id, attachment} <- @streams.attachments do %>
      <.attachment id={dom_id} attachment={attachment}/>
    <% end %>
  </div>
  """
end
  1. Non-separate lists
def mount(_, _, socket)
  socket
  |> stream(:posts, posts)
  |> stream(:attachments, attachments)

  {:ok, socket}
end

def render(assigns) do
  ~H"""
  <div phx-update="stream">
    <%= for {dom_id, post} <- @streams.posts do %>
      <.post id={dom_id} post={post}/>
    
      <%= for {dom_id, attachment} <- @streams.attachments do %>
        <.attachment :if={post.attachments_id == attachments.id} id={dom_id} attachment={attachment}/>
      <% end %>
    <% end %>
  </div>
  """
end

I have tried the latter scenario. The initial render is ok. I cannot get the UI to update, however. Just wanted to check if I am overlooking something, or whether it simply isn’t possible.

2

To add a bit more context.

I need to track the IDs of/in rendered elements, so I can rerender elements that need to be updated. Exploring using multiple streams as a way to so, instead of assigning a list of IDs to the socket struct.

The elements that need to be updated are identified not by the id of an item, but the id of a nested struct.