Working with Sibling Components: Difference between revisions

From ElixirBlocks
Jump to: navigation, search
(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