Phoenix Live View 使用 phx-update="ignore" 不断重建 DOM 元素

Question

在我设计的 chat app 中，我在底部有一个时间戳，应该告诉我页面加载的时间。添加聊天不应更改它，我在包含时间戳的 div 上包含一个 phx-update="ignore" 属性以防止出现这种情况：

<div id="date" phx-hook="Date" phx-update="ignore"></div>

但是，添加聊天时时间戳会更新。这是初始状态：

然后我单击新建聊天，出现对话框：

我检查了 DOM，我知道该步骤没有更改时间戳。但是，当我按下“保存”按钮时，时间戳确实发生了变化：

我怎样才能防止这种情况发生？

Answer 1

对话框中的“保存”按钮触发了导致页面刷新的重定向，所以我通过用一些带有 phx-hook 字段的小部件替换对话框来解决这个问题，并使用 [= 将聊天发送到服务器14=] 在 app.js 中：

index.html.leex

<input id="usernameinput" placeholder="Your name" phx-update="ignore"/>
<input id="chatinput" placeholder="Say something"/>
<button id="newchatbtn" phx-hook="ChatSend">Send</button>

app.js:

Hooks.ChatSend = {
    mounted() {
        let viewHook = this
        this.el.addEventListener("click", function() {
            let uni = document.getElementById("usernameinput")
            let ci = document.getElementById("chatinput")
            viewHook.pushEvent("send-chat", {msg: ci.value, username: uni.value})
        })
    }
}

index.ex:

  @impl true
  def handle_event("send-chat", %{"msg" => msg, "username" => username}, socket) do
    {:ok, c} = Chats.create_chat(%{username: username, body: msg})
    cs = socket.assigns.chats
    cs = cs ++ [c]
    socket = assign(socket, :chats, cs)
    {:noreply, socket}
  end

这里是the commit.

Phoenix Live View 使用 phx-update="ignore" 不断重建 DOM 元素

Phoenix Live View keeps rebuilding a DOM element with phx-update="ignore"

phoenix-live-view