Working with Sibling Components
From ElixirBlocks
defmodule Heading do
use Phoenix.Component
def head(assigns) do
~H"""
<ul>
<%= for heading <- @headings do %>
<li phx-click="append_content" phx-value-heading={heading}>{heading}!</li>
<% end %>
</ul>
"""
end
end
#________________________________________________________________
defmodule Content do
use Phoenix.Component
def content(assigns) do
~H"""
<p>This is content: {@content}!</p>
"""
end
end
#________________________________________________________________
defmodule AppWeb.PageLive do
use AppWeb, :live_view
import Heading
import Content
def mount(_params, _session, socket) do
{:ok, assign(socket, content: "This is some great content here")}
end
def headings do
["one", "two", "three"]
end
def render(assigns) do
~H"""
<Heading.head headings={headings()} />
<Content.content content={@content} />
"""
end
def handle_event("append_content", %{"heading" => _heading}, socket) do
updated_content = socket.assigns.content <> " hello there"
{:noreply, assign(socket, content: updated_content)}
end
end
defmodule AppWeb.PageLive do
use AppWeb, :live_view
import Phoenix.Component
defmodule Heading do
use Phoenix.Component
def head(assigns) do
click_handler = assigns[:click_handler] || "append_content" # Default to "append_content" if not passed
~H"""
<ul>
<%= for heading <- @headings do %>
<li phx-click={click_handler} phx-value-heading={heading}>{heading}!</li>
<% end %>
</ul>
"""
end
end
defmodule Content do
use Phoenix.Component
def content(assigns) do
~H"""
<p>This is content: {@content}!</p>
"""
end
end
def mount(_params, _session, socket) do
{:ok, assign(socket, content: "This is some great content here")}
end
def headings do
["one", "two", "three"]
end
def render(assigns) do
# Pass the desired function name as `click_handler` (you can pass any string you want)
~H"""
<Heading.head headings={headings()} click_handler="custom_action" />
<Content.content content={@content} />
"""
end
# Default handler for "append_content"
def handle_event("append_content", %{"heading" => _heading}, socket) do
updated_content = socket.assigns.content <> " hello there"
{:noreply, assign(socket, content: updated_content)}
end
# Custom handler for a different function
def handle_event("custom_action", %{"heading" => _heading}, socket) do
updated_content = socket.assigns.content <> " custom action triggered!"
{:noreply, assign(socket, content: updated_content)}
end
end