如何更新 LiveView 中 phx-update="stream" 代码块内的分配

Question

我有一个要使用 LiveView 流显示的笔记列表，并且我想使用由 Phoenix Presence 不断更新的名为

online_users_map

的分配，以显示哪个笔记的作者当前在线。在下面的示例代码中，我注意到第一个检查在用户加入或离开时打印更新的地图，但第二个检查仍然是 %{}，这使我认为流 phx-update 代码块中的分配是静态的。那是对的吗？如果是这样，如何使动态变化的分配值在流块中可用？

   <div>
    <%= inspect(@online_users_map) %>   <<< This prints correctly
      <ul
        phx-update="stream"
        phx-viewport-top={@page_no > 1 && "prev-page"}
        phx-viewport-bottom={!@end_of_timeline? && "next-page"}
        phx-page-loading
        id="searched_notess"
        class={[
          if(@end_of_timeline?, do: "pb-4", else: "pb-[calc(200vh)]"),
          if(@page_no == 1, do: "pt-4", else: "pt-[calc(200vh)]")
        ]}
      >

      <%= inspect(@online_users_map) %>  <<< This only prints %{}

        <li
          :for={{dom_id, note} <- @streams.searched_notes}
          class="pb-2 sm:pb-2 mt-2 flex flex-row "
          id={dom_id}
        >

Answer 1

phx-update

用于防止 LiveView 中发生任何更改。当将其设置为

phx-update="stream"

时，HTML 将根据流内容呈现，然后是数据，例如

@streams.searched_notes

已从套接字分配中删除（请参阅LiveView 流文档）。所以我同意，流块内渲染的 HTML 是“静态的”，您只能通过在服务器端使用

stream_insert

和

stream_delete

来更改它。

因此，我相信，访问

@online_users_map

分配的唯一方法是将数据集成到

@stream.searched_notes

中。可能作为

note

元素内的另一个字段，例如

author_online: <true | false>

。当然，只有当您计划显示每个

note

的信息时，这才有效，但这在问题中没有描述。