时间戳

首页 > 解决方案 > Phoenix Live View 使用 phx-update="ignore" 不断重建 DOM 元素

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

问题描述

在我设计的聊天应用程序中，我在底部有一个时间戳，应该告诉我页面何时加载。添加聊天不应该改变它，我phx-update="ignore"在包含时间戳的 div 上包含了一个属性以防止：

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

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

添加聊天之前

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

添加聊天

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

添加聊天后

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

标签： phoenix-live-view

解决方案

对话框中的“保存”按钮触发了导致页面刷新的重定向，因此我通过将对话框替换为带有字段的一些小部件，使用app.jsphx-hook将聊天发送到服务器来解决此问题：pushEvent

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>

应用程序.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})
        })
    }
}

索引.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

这是提交。

推荐阅读