phoenix-live-view - 如何防止 Phoenix Live View 删除由 JavaScript 放置的 DOM 元素？

Question

我还没有找到一种方法来始终阻止 Phoenix Live Views 从 DOM 中删除由 JavaScript 放置的元素。这是一个粗略的聊天应用程序的片段，该应用程序使用 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 删除笑脸。