Elixir Phoenix：用%JS{}重置模态编辑器默认预览状态

核心问题拆解 #

1. 模态框关闭前处于编辑态时，下次打开会保留编辑状态，不符合「每次打开默认预览」的需求
2. 修复重复ID后，点击事件无法读取传入参数，IO.inspect无输出
3. 尝试用%JS{}切换类重置状态未生效

解决方案 #

1. 用LiveView状态管理模态框模式（彻底解决默认预览问题）

不要依赖DOM类的残留状态控制预览/编辑模式，而是将模态框的模式绑定到LiveView的assigns中，每次打开模态框时强制重置为预览模式：

# 在LiveView模块中处理打开模态框的事件
def handle_event("open_note_modal", %{"note-id" => note_id}, socket) do
  # 读取目标note数据
  note = Testbed.get_note!(note_id)
  # 强制设置模态框为预览模式，同时标记模态框显示
  socket = 
    socket
    |> assign(:current_note, note)
    |> assign(:modal_mode, :preview)
    |> assign(:show_modal, true)
  
  {:noreply, socket}
end

# 切换到编辑模式的事件
def handle_event("switch_to_edit", _, socket) do
  {:noreply, assign(socket, :modal_mode, :edit)}
end

# 切换回预览模式的事件
def handle_event("switch_to_preview", _, socket) do
  {:noreply, assign(socket, :modal_mode, :preview)}
end

# 关闭模态框的事件
def handle_event("close_note_modal", _, socket) do
  {:noreply, assign(socket, :show_modal, false)}
end

在HEEx模板中，基于@modal_mode的状态渲染对应UI，而非依赖DOM类：

<!-- 模态框容器，动态ID避免重复 -->
<%= if @show_modal do %>
  <div id={"note-modal-#{@current_note.id}"} class="modal-overlay" phx-click-away="close_note_modal">
    <div class="modal-content">
      <%= if @modal_mode == :preview do %>
        <!-- 预览模式内容 -->
        <h3><%= @current_note.title %></h3>
        <div class="note-content"><%= @current_note.content %></div>
        <button phx-click="switch_to_edit" class="btn">编辑</button>
      <% else %>
        <!-- 编辑模式表单 -->
        <.form 
          for={@note_form} 
          phx-submit="save_note" 
          phx-change="validate_note"
          id={"note-form-#{@current_note.id}"}
        >
          <input type="text" name="title" value={@current_note.title} required />
          <textarea name="content" required><%= @current_note.content %></textarea>
          <div class="form-buttons">
            <button type="submit" class="btn">保存</button>
            <button phx-click="switch_to_preview" class="btn">取消</button>
          </div>
        </.form>
      <% end %>
    </div>
  </div>
<% end %>

2. 修复动态ID与参数传递问题

列表项的点击事件需要通过phx-value-*属性传递note的唯一标识，确保handle_event能正确读取参数：

<!-- 列表项渲染，动态绑定点击事件与参数 -->
<%= for note <- @notes do %>
  <div 
    class="note-list-item" 
    phx-click="open_note_modal" 
    phx-value-note-id={note.id}
  >
    <h4><%= note.title %></h4>
    <p class="note-preview"><%= String.slice(note.content, 0, 50) %>...</p>
  </div>
<% end %>

此时在handle_event("open_note_modal", params, socket)中，params["note-id"]就能拿到对应的note ID，IO.inspect(params)会正常输出日志。

3. 放弃依赖%JS{}重置DOM类

之前用%JS{}切换类未生效的原因是：DOM状态会被LiveView的Diff机制覆盖，且无法保证每次打开模态框时的状态一致性。通过assigns管理状态后，UI完全由LiveView的状态驱动，不需要再手动操作DOM类。

关键思路总结 #

• LiveView中，assigns是UI状态的唯一真相来源，避免依赖DOM残留状态控制UI
• 动态ID需配合phx-value-*传递参数，确保事件能正确关联到目标资源
• 模态框的默认状态在打开时强制重置，而非关闭时尝试修改

内容的提问来源于stack exchange，提问作者William