Phoenix LiveView? Elixir? ???? ??? ??? ??????? ???? Javascript ??? ??? ? ?????? ??? ? ?? ???? ?? ??? ?????.

??? ???, ??? ?? ???? ?? ?? ????? ? ?????? ???? ?? ??? ??? ? ????.

? ????? DOM? ?? ????? Javascript ?????? Phoenix LiveView? ???? ??? ???????.

?? ??? ?? ?? ?? ???? Javascript? ??? ? ?? ??? ??? ??? ??? ???? ??? ???? ????? ??? ???????( ??). push_event(LiveView) ? pushEvent(Javascript))? ???? ??? ??? ?? ?????? ?? ?? ??.

??

TLDR: Phoenix LiveView??? ??? push_event? ???? ???? ???? ?????? ??????? ???? ????? ? ? ????.

????? JSON ??? ?? ? ??? ? ?? ??? ???? json-view(??)? ?? ????? ? Javascript ?????? DOM? ?? ??? ? DOM?? ?? ??? ???? ????? ???? ?? ????. .

(LiveView) ???? ???? JSON ???? ?? ???? ??? ??? ?? ???????. ???? ?? ???? ????? ?? ?? ???? ???? ? ???? ?? ???? ?? ? ????.

??? LiveView? ???? mix phx.new? ???? Phoenix ????? ????? ?????.

????? ??

Javascript ???? ??? Javascript? ??? ???? ???? ?? ??? ????.

???? ??? ???? ??? ? ??? ??? ????? ??? ?? ? ?? ?? ??? ????.

• assets/vendor - ???? LiveView ???? ????? ?? ???? ? ????? ???? ??/app/app.js ??? ??? ?????. ?? ????? ? ?? ???? ?????? ????, ?? ?? ?? ??? ?????? ???? ?? ?? ?????.
• NPM/Yarn - esbuild ? webpack? ??? node_modules ??? ?? ?? ??? ??? ? ????. ?? ? ?? ???? ? ?? ??? ?????? ?????.

json-view? ??

? ?????? ????? ?? ???? ?? ? ?? ??? ??? ????.

LiveView? ??? ??? ????. ?, ?? ????? ??? ???? ???? LiveView? ?? ???? ??? ? ???? ?? ??? ???? ??? ?????.

????? ?? ??? ???? ?? ?????.

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

??? json-view? ?? ?????? ??? ???? ?????. DOM ??? ???? ???? Javascript? ???? ???? ? ??? ??? ?????.

import jsonview from '@pgrabovets/json-view';

const data = '{"name": "json-view", "version": "1.0.0"}'
const tree = jsonview.create(data);
jsonview.render(tree, document.querySelector('.tree'));

? ? ??? ?? ?????. ???? ????? ? ?? ??(??? ? ???)? ???? ??? ?? ???? ??????? ??? ?????? ?????? json-view? ?? ?????? ?????.

????? ???? ??? ?? ?? ???? ??? ? Javascript ??? ???? ???. ? ? ?? ??? ??? ????? ? ??? ?? ??? ???????.

?? ??

LiveView?? ??? (????) ?????? (LiveView) ?? ?? ??? ??? ???? ????, ??? ?? ??? ??????.

??? LiveSocket? ???? phx-hook ??? ???? ??? ?????. ???? ?? ??? ??? ???? ?? ?? ?? ?? ??? ? ???? ??? ??? ??? ? ????. ?? ?? ?? ???? ?? ??? ??? ? ????. ??? ?????.

???? ?? ?? ?? ??? ??? this.pushEvent? ???? ???? ???? ???, this.handleEvent? ???? ?? ??? ??? ?? ???? ???? ???? ???? ?????.

??? ??? ??? ????? ?? ???? ?? ????? ?????? ?? ?? ??? ??? ???? ???? ???.

? ??? ??? ?? ??? ???? ???? JsonView ??? ??? ?????. ? ??? ?? ???? jsonview.render? ???? ??? ??? ??????.

import { Socket } from 'phoenix';
import jsonview from '@pgrabovets/json-view';

const JsonViewHook = {
  mounted() {
    this.handleEvent("render_json", ({ data }) => {
      this.el.innerHTML = "";
      const tree = jsonview.create(data);
      jsonview.render(tree, this.el);
    });
  }
}

const liveSocket = new LiveSocket(
  "/live",
  Socket,
  {hooks: { JsonView: JsonViewHook }, ...}
 );
...

??? ??? ?? ?? ?? ???? ?? ?? ??? ?????.

1. ???? ??? ???? JsonViewHook ??? ?????. ? ??? ?? ??? DOM? ????? ? ??? ?????.
2. mounted ???? "render_json"??? ??? ?? ???? ?? ??? ???? ?????. ? ???? LiveView?? ?????.
3. ???? ???? JSON? ??? data ????? ???? ??? ?????.
4. ??? ?? ???? ?????.
5. jsonview.create ? jsonview.render? ???? JSON ???? ??? ??????.

? ??? ????? ?? ??("JsonView")? ?? phx-hook ??? ??? ???? ???.

<div>



<h2>
  
  
  Sending events to the server
</h2>

<p>We’ll just need to trigger an event from the backend to provide this data. We’ll leave this outside the scope of this article for now - perhaps a button could trigger an event to the backend? - but you could use this.pushEvent from the mounted hook like so:<br>
</p>

<pre class="brush:php;toolbar:false">mounted() {
  this.pushEvent("send_json", {});
}

handle_info? ??? ? ?? ???? LiveView ??? ????. LiveView ??? ?? ????? ?? ????? ?? ???? ?? ??? ??? ??? ? ?? ????? ???? this.pushEvent? ?? ? ?? ???? ??? ????.

???? ??? ???

push_event/3? LiveView?? ????? ???? ???? ?????. ???? ???? ?? ????? ??? ? ??? ??? ???? ???? ?? ???? ?? ??? ??? ???? ???? ?? ????. ??? ??? ??? ?? ?? ???? ???? ?????. ?? ??? ? ?? ??? ?????!

??????? ???? ???? ???????? ??? ? ?? ???? ?? handler_event ?? ??? ?????.

def render(assigns) do
  ~H"""
  <p>Hello <%= @name %></p>
  """
 end

?????! ???? ???? ????. ?????? ?? ??? ??? ???? ???? ???? ??? ??? ??? ?? ??? ???? ?????.

?? ??

?????? ?? ?? ??? ?? ??? ?? ???????. ?? ?? ???? ??? ??? ???? ? ?? ??? ???? ?? ????? ??? ?? ??? ???? ????. ?? ???? ???? ??? ??? ?? ??? ? ??? ???.

? ??? ??? ???? ???? ?????? ?????? ?? ???? ??? ?? ????. ?? ?? ????? ??? Javascript ?????? ? ?? ??? ??? ?? ?? ???? ?????. ?? ????? ??? json-view? ?? ???? ???, Chart.js? ?? ?? ?????? ?? ?????.

??? ??? ???? ???? ??? ?? ??? ???? ?? ????? ??? ???. ????? ??? ?? ??? ????? ?????? ??? ??????? ?????.

??? ?? ??? ??? ??? ???? ?? ???? ?? ?????. ???? ????, ?? ? ??? ?????. ???? ??? ???? ???? ?? ? pushEvent? ???? ??? ??? ??? ??? ???? ? ????.

??

DOM? ?? ??? ??? ??? Javascript ?????? ?????? ???? ?? ???? ??? ??? ?????? ???? ?? ?????. ?? ??? ????? ???? ??? ???? LiveView? ???? ?? ??? ??? ?? ??? ? ?? ?????? ??? ??? ?????.

LiveView ?? ? ?? ???? ????? ?? ???? ???? ???? ??? ? ????. ?? ??? ?? ??? ?? ??? ??? ?? ?? ???, ??? Javascript ?????? ???? ???? ?????? ?? ???? ???? ????? ?? ???? ?? ?????.

? ??? Phoenix LiveView, ?? ? push_event: json_view? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!