Phoenix/Elixir：如何在不使用表单的情况下使用参数调用handle_event？

Question

如何在不使用表单的情况下调用handle_event希望特定的参数？

我希望在 row_click 发生时以模式显示表行详细信息。我能够触发处理事件，但参数始终是

%{}

。

Answer 1

查看有关 click events 的文档，了解有关事件参数和 JS 命令的更多信息。

您可以使用

JS.push

发送事件（带参数）或使用任何其他 JS 函数。

这是简短的答案，现在是长答案，希望能更具体地回答你的第二个问题。如果没有，您应该提供更多详细信息。 ;p

显示带有表格行详细信息的模式

我假设我们刚刚创建了一个新的 Phoenix 项目，运行

mix phx.gen.live Blog Post posts title:string body:text

并按照说明创建了一个新的实时视图。目标是单击索引视图中的表格行并显示带有表格行详细信息的模式。

在

index.html.heex

中已经有

new

和

edit

操作的模式。让我们在其正下方为新的

show

操作添加一个模式：

<.modal :if={@live_action == :show} id="post-show-modal" show on_cancel={JS.patch(~p"/posts")}>
  <h1 class="text-lg font-semibold leading-8 text-zinc-800"><%= @post.title %></h1>
  <p class="mt-2 text-sm leading-6 text-zinc-600"><%= @post.body %></p>
</.modal>

我们希望在单击表格行时打开此模式，但现在表格的

row_click

功能导航到

/posts/#{post}

，然后路由到

PostLive.Show

视图。让我们通过将

show

路线/操作路由到

PostLive.Index

来更改它。在

router.ex

中更改行：

live "/posts/:id", PostLive.Show, :show
# to
live "/posts/:id", PostLive.Index, :show

并向

PostLive.Index

模块添加相应的操作（

post_live/index.ex

）：

  defp apply_action(socket, :show, %{"id" => id}) do
    socket
    |> assign(:page_title, "Show Post")
    |> assign(:post, Blog.get_post!(id))
  end

现在一切都已连接，当单击表格行时，显示模式将打开。

为了进一步改进这一点，请将表的

row_click

函数更改为使用

patch

而不是

navigate

，因为我们导航到相同的实时模块（更多信息请参见here）：

row_click={fn {_id, post} -> JS.patch(~p"/posts/#{post}") end}