LiveView предоставляет возможность навигации по страницам с помощью API pushState браузера. При живой навигации страница обновляется без полной перезагрузки.

Запустить живую навигацию можно двумя способами:

• На клиенте — для этого нужно передать patch={url} или navigate={url} компоненту Phoenix.Component.link/1.

• На сервере — для этого используется Phoenix.LiveView.push_patch/2 или Phoenix.LiveView.push_navigate/2.

Например, вместо следующего кода в шаблоне:

<.link href={~p"/pages/#{@page + 1}"}>Next</.link>

Нужно написать:

<.link patch={~p"/pages/#{@page + 1}"}>Next</.link>

Или в LiveView:

{:noreply, push_patch(socket, to: ~p"/pages/#{@page + 1}")}

Операции «patch» следует использовать, когда нужно перейти к текущему LiveView, просто обновив URL и текущие параметры, без монтирования нового LiveView. При использовании patch вызывается обратный вызов handle_params/3, а клиенту отправляется минимальный набор изменений. Подробнее см. в следующем разделе.

Операции «navigate» следует использовать, когда нужно размонтировать текущий LiveView и смонтировать новый. Переходить с помощью «navigate» можно только между LiveView в рамках одного сеанса. Во время перенаправления к LiveView добавляется класс phx-loading, который можно использовать, чтобы сообщить пользователю о загрузке новой страницы.

Если попытаться выполнить patch для другого LiveView или перейти между разными сеансами LiveView, произойдет полная перезагрузка страницы. Это позволяет приложению продолжать работать, если его структура изменилась и эти изменения не отражены в навигации.

Кратко:

• <.link href={...}> и redirect/2 работают на основе HTTP, доступны везде и полностью перезагружают страницу

• <.link navigate={...}> и push_navigate/2 позволяют переходить между LiveView в рамках одного сеанса. Они монтируют новый LiveView, сохраняя текущий макет

• <.link patch={...}> и push_patch/2 обновляют текущий LiveView и отправляют только минимальную разницу, сохраняя при этом положение прокрутки

handle_params/3

Обратный вызов handle_params/3 вызывается после mount/3 и перед первоначальным рендерингом. Он также вызывается при каждом использовании <.link patch={...}> или push_patch/2. Первым аргументом передаются параметры запроса, вторым — URL, третьим — сокет.

Предположим, у вас есть LiveView UserTable для отображения всех пользователей системы, и в маршрутизаторе он определен так:

live "/users", UserTable

Чтобы добавить сортировку с помощью живой навигации, можно сделать так:

<.link patch={~p"/users?sort_by=name"}>Sort by name</.link>

При нажатии выполняется переход к текущему LiveView, поэтому будет вызван handle_params/3. Помните: полученным параметрам нельзя доверять, поэтому используйте обратный вызов для проверки пользовательского ввода и соответствующего изменения состояния:

def handle_params(params, _uri, socket) do
  socket =
    case params["sort_by"] do
      sort_by when sort_by in ~w(name company) -> assign(socket, sort_by: sort_by)
      _ -> socket
    end

  {:noreply, load_users(socket)}
end

Обратите внимание: мы вернули {:noreply, socket}, где :noreply означает, что клиенту не отправляется дополнительная информация. Как и в случае с другими обратными вызовами handle_*, изменение состояния внутри handle_params/3 запускает новый рендеринг на сервере.

Параметры, передаваемые в handle_params/3, совпадают с параметрами, передаваемыми в mount/3. Как же решить, в каком обратном вызове загружать данные? Как правило, данные всегда следует загружать в mount/3, поскольку mount/3 вызывается один раз за жизненный цикл LiveView. В handle_params/3 нужно загружать только те параметры, которые, как ожидается, будут изменяться с помощью <.link patch={...}> или push_patch/2.

Предположим, у вас есть блог. URL отдельной записи выглядит так: "/blog/posts/:post_id". На странице записи есть комментарии с постраничной навигацией. Вы используете <.link patch={...}>, чтобы обновлять отображаемые комментарии при каждом переходе между страницами, меняя URL на "/blog/posts/:post_id?page=X". В этом примере "post_id" вы получите в mount/3, а страницу комментариев — в handle_params/3.

Замена адреса страницы

LiveView также позволяет заменить текущий URL в браузере. Это полезно, когда некоторые события должны менять URL, но не добавлять записи в историю браузера. Для этого передайте параметр <.link replace> одному из помощников навигации.

Несколько LiveView на одной странице

LiveView позволяет разместить несколько LiveView на одной странице, вызвав Phoenix.Component.live_render/3 в шаблонах. Однако использовать описанную здесь функциональность «живой навигации» могут только LiveView, определенные непосредственно в маршрутизаторе. Это важно, поскольку LiveView тесно взаимодействуют с маршрутизатором, что гарантирует возможность перехода только к известным маршрутам.