0

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

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

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

添加聊天之前

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

添加聊天

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

添加聊天后

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

4

1 回答 1

1

对话框中的“保存”按钮触发了导致页面刷新的重定向，因此我通过将对话框替换为带有字段的一些小部件，使用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

这是提交。

于 2021-03-22T16:26:40.207 回答