Rendering .leex template inside a LiveView

I have a liveview module which I plan to render a child view component/template.

def render(assigns) do
    ~L"""
    <section class="section">
      <button phx-click="update_title">Update Title</button>
      <h1>LiveSocket - <%= @title %><h1>
      <button phx-click="toggle">Open modal</button>
        <div class="modal <%= if @modal_open, do: 'is-active' %>">
          <div class="modal-background" phx-click="close_modal"></div>
          <div class="modal-card">
            <header class="modal-card-head">
              <p class="modal-card-title">Modal title</p>
            </header>
            <section class="modal-card-body">
              <form phx-submit="save">
                <input name="title" value="<%= @title %>"/>
                <button class="button is-success">Save changes</button>
                <button class="button" phx-click="close_modal">Cancel</button>
              </form>
            </section>
          </div>
        </div>
    </section>
    """
  end

and I plan to move modal section to another .leex file so that in the liveview module I could just render the template and pass the values to that template.

Basically what I want to do is like this.

defmodule ShiritoriWeb.HomeLive do
  use Phoenix.LiveView
   
  def render(assigns) do
    ~L"""
    <section class="section">
      <button phx-click="update_title">Update Title</button>
      <h1>LiveSocket - <%= @title %><h1>
      <button phx-click="toggle">Open modal</button>
       //render modal.html
       //render list.html
    </section>
    """

Modal.html.leex

<div class="modal <%= if @modal_open, do: 'is-active' %>">
      <div class="modal-background" phx-click="close_modal"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Modal title</p>
        </header>
        <section class="modal-card-body">
          <form phx-submit="save">
            <input name="title" value="<%= @title %>"/>
            <button class="button is-success">Save changes</button>
            <button class="button" phx-click="close_modal">Cancel</button>
          </form>
        </section>
      </div>
</div>

List.html.leex

<section class="section">
   <%= for user <- Repo.all(User) do %>
     <span><%= user.name %></span>
   <% end %>
</section>

You could use Live Component.

https://hexdocs.pm/phoenix_live_view/0.6.0/Phoenix.LiveComponent.html#content

1 Like