Как правильно общаться с liveview от javascript

Question

Я пытаюсь обновить Liveview с помощью Javascript после запуска события Javascript. Liveview должен отображать элемент <div> с некоторыми значениями, отправленными из Javascript.

Мой вопрос: как мне передать эти значения из Javascript в Liveview?

Мне также может понадобиться значение, отправленное Liveview в Javascript. Опять же: как мне передать эти значения из Liveview в Javascript?

Существует Livesocket, созданный в Javascript для работы liveview, но я не вижу способа получить или установить присвоенные значения оттуда. Единственный способ передать значения из / в Liveview в какой-то момент кажется через DOM. Например:

<div id="lv-data" phx-hook="JavascriptHook"></div>

let hooks = {};
hooks.JavascriptHook = {
  mounted(){

    this.el.addEventListener("jsEvent", (e) => 
      this.pushEvent("jsEventToPhx", e.data, (reply, ref) => 
        console.log("not sure what to do here")));

    this.handleEvent("phxEventToJS", (payload) => console.log("data received: " + payload));
  }
}

Странно использовать DOM с фиктивным <div> вообще для чистого обмена данными ...

Answer 1

Реализован ли ваш модуль LiveView для обработки события jsEventToPhx, которое вы отправляете из внешнего интерфейса? У вас должен быть родительский LiveView или LiveViewComponent, который реализует обратный вызов handle_event/3 для этого сообщения. См .:

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#c: handle_event / 3

Например (в вашем модуле LiveView):

def handle_event("jsEventToPhx", params, socket) do
  # Handle `params` you sent from JavaScript.
  # Reply with {:reply, data, socket} or do not reply at all:
  {:noreply, socket}
end