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?
- 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
- 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
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex










