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

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

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

我們將遇到鉤子，它允許我們在給定元素的某些生命週期元素上運行Javascript，以及這些鉤子如何啟用事件流（使用 LiveView 中的Push_event 和Javascript 中的pushEvent）允許客戶端和客戶端之間進行雙向即時通訊伺服器。

背景

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

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

讓我們透過一個範(fàn)例來了解如何將其與 (LiveView) 伺服器提供的 JSON 資料整合。我們將從後端發(fā)送一些靜態(tài)資料來回應(yīng)事件，但這些資料可以來自任何來源。

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

庫設(shè)定

有多種方法可以將 Javascript 套件合併為頁面 Javascript 的一部分。

建議首選設(shè)定超出了本文的範(fàn)圍，但有兩種主要方法：

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

json-view 的問題

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

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

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

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 這樣的函式庫來在客戶端渲染豐富的介面。

從根本上來說 - 當(dāng)伺服器提示頁面狀態(tài)變更時，我們需要執(zhí)行 Javascript 程式碼。讓我們來看看 hooks，它有助於協(xié)調(diào)這兩種渲染模型。

掛鉤設(shè)置

在 LiveView 中，hooks 是在（瀏覽器）客戶端和（LiveView）伺服器之間提供雙向通訊的方式，通訊的核心物件是 事件。

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

在 Mounted 之類的回呼中，鉤子使用 this.pushEvent 將事件傳送到後端，並透過使用 this.handleEvent 為特定事件名稱註冊處理程序來處理來自伺服器的事件。

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

記住這些知識 - 讓我們定義一個 JsonView 鉤子來註冊一個事件處理程序，最終調(diào)用元素上的 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. 我們定義一個有 mounted 函數(shù)的 JsonViewHook 物件。當(dāng)帶有此鉤子的元素被掛載到 DOM 中時，將呼叫此函數(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 資料渲染到我們的元素中。

要使用此鉤子 - 我們只需將帶有鉤子名稱（“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 文件的相關(guān)部分涵蓋了 this.pushEvent 的更多可能性，包括可以指定處理函數(shù)直接處理回覆有效負載的場景。

從伺服器發(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

就是這樣！這裡也有彈性。在客戶端和伺服器上使用名稱註冊事件處理程序標(biāo)誌著事件處理和事件引發(fā)方式之間的明確分離。

進一步整合

我們已經(jīng)看到了客戶端和伺服器之間整合的一個簡單範(fàn)例。對此的常見擴充是透過使用事件參數(shù)和元素屬性來將某些更新範(fàn)圍限製到某些元素。這有助於減少不必要的事件和處理程序工作量。

還可以擴展此事件處理，以實現(xiàn)客戶端庫與後端更緊密的整合。例如，通常這些 Javascript 程式庫會發(fā)出更高層級的使用者互動事件。我們的函式庫範(fàn)例 json-view 不會執(zhí)行此操作，但像 Chart.js 這樣的圖表庫會執(zhí)行此操作。

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

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

結(jié)論

整合需要控制 DOM 的強大 Javascript 用戶端程式庫是建立豐富的動態(tài)使用者介面的關(guān)鍵部分。並非所有頁面更新都需要即時，因此保留 LiveView 提供了一種強大且簡單的方法來繼續(xù)控制其他頁面狀態(tài)。

熟悉 LiveView 掛鉤及其相關(guān)事件使得將它們與源自伺服器的資料整合成為可能。同樣重要的是要注意，並非所有使用者互動都需要往返伺服器，並且當(dāng)您使用強大的 Javascript 庫時，您建立的介面將更加靈活且響應(yīng)更快。

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