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>