Phoenix LiveView 是一個基于 Elixir 構(gòu)建的強大框架，提供了一種無需大量 JavaScript 即可構(gòu)建實時 Web 界面的創(chuàng)新方法。

但是，與現(xiàn)有的客戶端庫（例如用于繪圖、可視化或渲染的庫）集成有時可能會是一個挑戰(zhàn)。

在本文中，我們將探討如何將 Phoenix LiveView 與直接渲染到 DOM 的 Javascript 庫集成。

我們將遇到鉤子，它允許我們在給定元素的某些生命周期元素上運行Javascript，以及這些鉤子如何啟用事件流（使用 LiveView 中的 Push_event 和 Javascript 中的 pushEvent）允許客戶端和客戶端之間進行雙向?qū)崟r通信服務(wù)器。

背景

TLDR：在Phoenix LiveView中，您可以使用hooks和push_event來推送數(shù)據(jù)，并讓客戶端庫處理渲染。

json-view（演示） - 將網(wǎng)頁上的 JSON 對象顯示為可展開和折疊的樹 - 是一些客戶端 Javascript 庫如何控制對 DOM 的渲染以及與其交互的一個很好的示例.

讓我們通過一個示例來了解如何將其與 (LiveView) 服務(wù)器提供的 JSON 數(shù)據(jù)集成。我們將從后端發(fā)送一些靜態(tài)數(shù)據(jù)來響應(yīng)事件，但這些數(shù)據(jù)可以來自任何來源。

以下內(nèi)容假設(shè)您已使用 mix phx.new 設(shè)置了 Phoenix 項目，并啟用了 LiveView。

庫設(shè)置

有多種方法可以將 Javascript 包合并為頁面 Javascript 的一部分。

推薦首選設(shè)置超出了本文的范圍，但有兩種主要方法：

• assets/vendor - 在典型的 LiveView 項目模板中，頂欄放置在此目錄中，并包含在 asset/app/app.js 入口點文件中。一般來說，這適用于更小、更穩(wěn)定的庫，特別是在提供庫的單個文件版本的情況下。
• NPM/Yarn - esbuild 和 webpack 可以將引用的 node_modules 文件打包到單個分發(fā)文件中。這適用于更大、更復(fù)雜、更改更頻繁的庫。

json-view 的問題

當(dāng)我們嘗試組合這兩個庫時，存在兩種不兼容的渲染模型。

LiveView 遵循 聲明性模型 - 您設(shè)計視圖，確定應(yīng)顯示哪些數(shù)據(jù)，LiveView 會在底層數(shù)據(jù)更改時計算出頁面的哪些元素需要更改。

它通過在渲染中使用套接字分配來實現(xiàn)這一點：

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

但是，像 json-view 這樣的庫可以在 命令式模型上工作。我們指定在 DOM 本身布局之外以 Javascript 顯示數(shù)據(jù)所需的步驟：

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'));

這兩個模型是不一致的。我們看似沒有辦法匹配兩種渲染數(shù)據(jù)的方法（聲明式和命令式），但我們需要像 json-view 這樣的庫來在客戶端渲染豐富的界面。

從根本上來說 - 當(dāng)服務(wù)器提示頁面狀態(tài)更改時，我們需要運行 Javascript 代碼。讓我們看一下 hooks，它有助于協(xié)調(diào)這兩種渲染模型。

掛鉤設(shè)置

在 LiveView 中，hooks 是在（瀏覽器）客戶端和（LiveView）服務(wù)器之間提供雙向通信的方式，通信的核心對象是 事件。

鉤子在 LiveSocket 中定義，并使用 phx-hook 屬性附加到元素。有許多回調(diào) - 但我們將重點關(guān)注已安裝的回調(diào)，因為我們可以通過事件協(xié)調(diào)其他所有內(nèi)容。您也可以為其他生命周期事件提供回調(diào) - 查看文檔。

在 Mounted 之類的回調(diào)中，鉤子使用 this.pushEvent 將事件發(fā)送到后端，并通過使用 this.handleEvent 為特定事件名稱注冊處理程序來處理來自服務(wù)器的事件。

需要注意的是，每個元素只允許有一個鉤子，因此您只需要推理客戶端和服務(wù)器之間的一個事件流。

記住這些知識 - 讓我們定義一個 JsonView 鉤子來注冊一個事件處理程序，最終調(diào)用元素上的 jsonview.render 來渲染數(shù)據(jù)樹。

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. 我們定義一個帶有 mounted 函數(shù)的 JsonViewHook 對象。當(dāng)帶有此鉤子的元素被掛載到 DOM 中時，將調(diào)用此函數(shù)。
2. 在mounted內(nèi)部，我們?yōu)槊麨椤皉ender_json”的自定義事件設(shè)置了一個事件監(jiān)聽器。此事件將從我們的 LiveView 觸發(fā)。
3. 收到事件后，它需要一個包含要渲染的 JSON 的 data 參數(shù)。
4. 我們清除元素的現(xiàn)有內(nèi)容。
5. 我們使用 jsonview.create 和 jsonview.render 將 JSON 數(shù)據(jù)渲染到我們的元素中。

要使用此鉤子 - 我們只需將帶有鉤子名稱（“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", {});
}

將事件發(fā)送到可以使用handle_info處理的LiveView服務(wù)器。 LiveView 文檔的相關(guān)部分涵蓋了 this.pushEvent 的更多可能性，包括可以指定處理函數(shù)直接處理回復(fù)有效負(fù)載的場景。

從服務(wù)器發(fā)送事件

push_event/3 是將事件從 LiveView 推送到瀏覽器的方式。它可以在任何時候調(diào)用 - 包括在掛載時 - 盡管一個好的做法是在發(fā)送這些事件之前確保頁面及其所有元素處于已知狀態(tài)。否則 - 您將在頁面設(shè)置期間默默地刪除事件 - 這是導(dǎo)致不可預(yù)測性的必然途徑！

讓我們?yōu)榭赡軓目蛻舳耸盏降氖录帉懸粋€handle_event 子句，它將事件推送到客戶端：

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

就是這樣！這里也有靈活性。在客戶端和服務(wù)器上使用名稱注冊事件處理程序標(biāo)志著事件處理和事件引發(fā)方式之間的明確分離。

進一步整合

我們已經(jīng)看到了客戶端和服務(wù)器之間集成的一個簡單示例。對此的常見擴展是通過使用事件參數(shù)和元素屬性來將某些更新范圍限制到某些元素。這有助于減少不必要的事件和處理程序工作量。

還可以擴展此事件處理，以實現(xiàn)客戶端庫與后端更緊密的集成。例如，通常這些 Javascript 庫會發(fā)出更高級別的用戶交互事件。我們的庫示例 json-view 不會執(zhí)行此操作，但像 Chart.js 這樣的圖表庫會執(zhí)行此操作。

但是，從用戶交互的角度來看，通常應(yīng)該避免往返服務(wù)器進行處理。通常，任何基于事件的渲染更新都將由渲染庫客戶端處理。

但是出于其他原因捕獲用戶活動是一個常見的用例。這包括監(jiān)控、記錄和分析。這些不需要響應(yīng)，因此鉤子內(nèi)的 PushEvent 非常適合服務(wù)器上的此類異步處理。

結(jié)論

集成需要控制 DOM 的強大 Javascript 客戶端庫是創(chuàng)建豐富的動態(tài)用戶界面的關(guān)鍵部分。并非所有頁面更新都需要實時，因此保留 LiveView 提供了一種強大而簡單的方法來繼續(xù)控制其他頁面狀態(tài)。

熟悉 LiveView 掛鉤及其相關(guān)事件使得將它們與源自服務(wù)器的數(shù)據(jù)集成成為可能。同樣重要的是要注意，并非所有用戶交互都需要往返服務(wù)器，并且當(dāng)您使用強大的 Javascript 庫時，您構(gòu)建的界面將更加靈活和響應(yīng)更快。

以上是Phoenix LiveView、鉤子和push_event：json_view的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！