当更新不同的元素时,我遇到了update()
调用钩子函数的问题。我的 LiveView 进程从其他进程接收到两条不同的消息,并且两个事件处理程序更新了两个不同的分配,但是这两个更新都调用了挂钩,即使只有一个更新会影响带有挂钩的元素。我猜这是因为在分配更改时重新渲染了整个 LiveView。我希望挂钩仅在挂钩所绑定的元素发生更改时触发。
我将如何解决这个问题?
我正在使用phoenix 1.5.9
和phoenix_live_view 0.15.1
。
下面我制作了一个类似于我的用例的最小代码示例:
实时取景
defmodule DoubleUpdateWeb.PageLive do
use DoubleUpdateWeb, :live_view
@impl true
def mount(_params, _session, socket) do
Process.send_after(self(), {:loop1, 0}, 1000)
Process.send_after(self(), {:loop2, 0}, 1500)
{:ok, socket, temporary_assigns: [log1: [], log2: []]}
end
@impl true
def handle_info({:loop1, id}, socket) do
Process.send_after(self(), {:loop1, id + 1}, 1000)
socket = assign(socket, log1: [{id, "log1"}])
{:noreply, socket}
end
@impl true
def handle_info({:loop2, id}, socket) do
Process.send_after(self(), {:loop2, id + 1}, 1000)
socket = assign(socket, log2: [{id, "log2"}])
{:noreply, socket}
end
end
模板
<div id="log1" phx-update="append" phx-hook="TestHook">
<%= for {id, msg} <- @log1 do %>
<p id="log1-<%= id %>"><%= msg %></p>
<% end %>
</div>
<div id="log2" phx-update="append">
<%= for {id, msg} <- @log2 do %>
<p id="log2-<%= id %>"><%= msg %></p>
<% end %>
</div>
钩
this.el
在控制台中打印了两次,但我希望它只打印一次,因为它只附加到div
withid="log1"
Hooks.TestHook = {
updated() {
console.log(this.el);
},
};
谢谢