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

问题描述 投票:0回答:1

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

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

%{}

elixir phoenix-framework phoenix-live-view
1个回答
0
投票

查看有关 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}
© www.soinside.com 2019 - 2024. All rights reserved.