如何防止 Phoenix Live View 删除 JavaScript 放置的 DOM 元素？

Question

我还没有找到一种方法来始终阻止 Phoenix Live Views 从 DOM 中删除由 JavaScript 放置的元素。这是来自 crude chat app 的片段，它使用 JavaScript 在页面加载后添加笑脸：


<span><%= live_patch "New Chat", to: Routes.chat_index_path(@socket, :new) %></span>

<div id="smiley" style="font-size: 80px" phx-update="ignore"></div>

<script>
  $(document).ready(function() {
    $('#smiley').html('')
  });
</script>

phx-update="ignore" 属性防止笑脸立即消失，但添加新聊天会导致笑脸消失：

Answer 1

您可以像这样使用 phx-hook 来防止它在新聊天后消失：

<div id="smiley" style="font-size: 80px" phx-hook="Smiley"></div>

并在 app.js 中：


let Hooks = {}
Hooks.Smiley = {
    mounted() {
        this.el.innerHTML = ''
    }
}

let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})

完整代码在这里：https://github.com/ijt/rantclub/tree/c383530ce9749beb21f2c60605576f0d047043f8.

一个警告：出于某种原因，这并不能阻止 Delete 删除笑脸。

如何防止 Phoenix Live View 删除 JavaScript 放置的 DOM 元素？

How do I prevent a Phoenix Live View from removing DOM elements put there by JavaScript?

phoenix-live-view