Interoperation between LiveView and normal View

Phoenix Forum Questions / Help
,
1

Hey Guys. I’m playing a bit with LiveView and i ask me if it’s possible to interact between liveView and normal view. Considering following:

Eex File:

<table class="table">
        <thread>
        <tr>
            <%= for entity <- menubar do %>
            <th scope="col">
                <%= entity%>
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                <div class="dropdown-menu">
                    <button class="dropdown-item" phx-click="<%= entity%>-sort-ascending">Sort Ascending</button>
                    <button class="dropdown-item" phx-click="<%= entity%>-sort-descending">Sort Descending</button >
                    <button class="dropdown-item btn btn-default dropdown-toggle" data-toggle="dropdown">Columns</button>
                        <div class="dropdown-menu">
                           <div class="dropdown-item"><label>henlo</label></div>
                        </div>
                    <div class="dropdown-item"><%= text_input nil, :query%></div>
                </div>
            </th> 
            <%end%>
        </tr>
        </thread>
        <%= live_render @conn, ClickdummyWeb.LiveDataEntries, session: %{} %>
</table>

The LiveView

 def render(assigns) do
        ~L"""
        <tbody>
            <%= for entry <- assigns.data do %>
                <tr>
                    <%= for key <- assigns.menubar do %>
                        <td><%= Map.get(entry, key)%></td>
                    <% end %>
                </tr>
            <%end%>
        </tbody>
        """
    end

    def mount(_session, socket) do
        {:ok, assign(socket, data: @data, menubar: @menubar)}
    end

    def handle_event("user_id-sort-ascending", _key, socket) do
        new_data = socket.assigns.data |> Enum.sort((&(&1.user_id < &2.user_id)))
        {:noreply, assign(socket, data: new_data)}
    end
...

In this case the LiveDataEntries LiveView won’t re render when i click on a drop down-item. I guess because the LiveView uses a particular Channel which is not accessible context of the eex.

Is it generally possible to nest certain kinds of views or should I only create single responsible views without intercommunication?

Theoretically it should be possible, right? I mean LiveView is only a Wrapper which creates Channels and abstract the whole Javascript.

I hope it’s clear what my concrete problem is. Please feel free to make suggesstions and comments.

regards
Kirill

2

You can invoke a regular view inside a live view and the regular view will be updated if changed, except it won’t be super efficient.

But if you invoke a live inside a regular view, only the live view will be updated, since that is considered the starting point. That was pretty much by design, so you can use live view only on part of your app if you want to (think a widget).

4 Likes