Working with Sibling Components: Difference between revisions
From ElixirBlocks
(Created page with "<source> 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 #__...") |
No edit summary |
||
Line 48: | Line 48: | ||
def handle_event("append_content", %{"heading" => _heading}, socket) do | def handle_event("append_content", %{"heading" => _heading}, socket) do | ||
updated_content = socket.assigns.content <> " hello there" | updated_content = socket.assigns.content <> " hello there" | ||
{:noreply, assign(socket, content: updated_content)} | |||
end | |||
end | |||
</source> | |||
<source> | |||
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)} | {:noreply, assign(socket, content: updated_content)} | ||
end | end |
Latest revision as of 14:44, 12 March 2025
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