coen.bakker

coen.bakker

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

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.

First Post!

coen.bakker

coen.bakker

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.

Where Next?

Popular in Questions Top

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
ashish173
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
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
freewebwithme
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
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
jononomo
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
ashish173
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
sergio_101
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
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New

We're in Beta

About us Mission Statement